滚动条颜色

滚动条是一个可移动的栏，通常位于屏幕的最右侧或底部。滚动条可以水平安装或垂直安装，允许用户上下或左右移动窗口。换句话说，滚动条是在用户和系统窗口显示之间创建交互的小部件或技术，其滚动连续的图片或文本或任何类型的显示。滚动条包含一个“BAR”或俗称“TRACK”，该滚动条有一个“THUMB”，用于上下或左右移动窗口内容。在本主题中，我们将学习滚动条颜色。

一般来说，你看到的滚动条通常是块状的，颜色是灰色的。但滚动条的默认颜色和其他属性可以使用 CSS 或 JavaScript 或两者来操作和自定义。

在接下来的部分中，我们将尝试创建使用 CSS 和 Javascript 操作的滚动条。

自定义滚动条颜色

颜色属性只是帮助设置不同的颜色，而不是“拇指”的默认灰色和通常的轨道颜色。我们都知道滚动条的背景区域颜色（无论用户向哪个方向滚动，通常都是固定的）被称为“TRACK”。而移动部分，实际上是随着滚动窗口一起滚动，它漂浮在轨道上，被称为“THUMB”。

下面是解释轨道和拇指的可视化示例图。

上图是一个信息溢出的网页的简单表示。用户必须点击拇指并上下拖动才能查看完整信息。

上图中可以看到的滚动条是一个基于默认浏览器的滚动条，具有默认值。我们一直在谈论默认值；我们也来看看他们吧。

• ：定义滚动条的颜色及其默认值，如下所示：
• auto：如果程序员没有给出任何特定的颜色或属性，“auto”是滚动条轨迹的默认属性。
• dark：“dark”属性，如果提供，会显示一个深色滚动条，它可以是浏览器或平台提供的较暗颜色之一，也可以是由你。
• light： ‘light’属性显示平台提供的颜色或您为滚动条设置的颜色的较浅阴影。
• :第一个颜色表示滚动条滑块的颜色，第二个颜色表示轨道的颜色。

属性缺点是有限的，仅在特定版本及以上的浏览器上受支持。例如，Chrome 81及以上版本支持该属性，Firefox 72及以上版本也支持该属性，等等。为了避免这种情况，我们使用另一个名为“-webkit-”属性的属性。

Opera、Chrome、Safari 等浏览器都是 -webkit- 浏览器，因此支持称为“:: -webkit-scrollbar”元素的非标准伪元素，这使我们可以轻松更改滚动条与浏览器无关。

默认情况下，这些属性设置为“自动”，在操作时，可以创建非常有趣的视觉效果。这些元素添加到代码顶部的

中（见下文）。部分来自定义浏览器的默认滚动条属性。

滚动条颜色示例

我们创建了以下宽度为 18 像素的简单滚动条示例。我们给它一个黄色的粘性颜色和绿叶绿条或手柄颜色。

<style>
/* width */
::-webkit-scrollbar {
width: 18px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
}
</style>

还可以向滚动条或手柄添加一个属性，“::-webkit-scrollbar-thumb:hover”，它可以帮助您在滚动条悬停时为滚动条设置不同的颜色。

要向我们的栏或手柄添加“悬停”属性，我们只需将以下代码行添加到我们的脚本中；

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}

结果如下图所示：

将鼠标悬停在我们的绿叶色条上时会变为棕色。

让我们看另一个探索更多属性的例子。在下面的示例中，我们使用边框半径属性平滑了条和拇指。有趣的是创建按钮，让用户可以通过单击按钮而不是拖动栏来轻松移动轨道上的栏。

我们添加了以下代码来创建我们自己的自定义按钮：

/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}

The above will simply display the area with a border where our buttons will appear, as shown below. This will need some customization as well.

After our customization (see the code added) is done, we get the final result. See the results for yourselves:

Complete code is given below:

<style>
/* Custom width for the Scrollbar */
::-webkit-scrollbar {
width: 18px;
}
/* Custom Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}
/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Custom Up Direction Button */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
/* Custom Down Direction Button */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
</style>

SimpleBar: A JavaScript Library

There is always another way to implement elements in your project. A custom scroll bar can also be added with the help of jquery plugins and javascript libraries, popular in the web market. For example, SimpleBar is the new Javascript library that makes it easier for the author to create customized scrollbars.

It’s a standalone library that adds a scroll bar to any scrollable element or component, or container which might have overflowing content. This javascript library makes your content dynamic and keeps the native scroll behavior. A simple demo is shown below.

Customization

You can easily use these javascript libraries by installing and importing them into your projects or directly including them and their CSS files (if any) on to your HTML page. In the below example, we will be using the second option, directly including a javascript library into our program.

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css">
<strong> </strong><script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>

Adding these two lines to your HTML page will include and attach a remote file that can not be edited to your HTML like this; Next, we will add, ‘data-simplebar’ attribute to the division or the content, which will be the scrollable container of your HTML page. In our example, we added this attribute to the

tag itself. Along with this, we will require a sample text; I have added ‘Lorem Ipsum’ default text to our tag to make the web page scrollable. And that is it. Simple right? When this is all done, your web page will look like this –> But it’s still raw and a bit ugly. I have done a few tweaks, as shown below, and see the results for your selves. The full code for CSS is given below, along with the results.

<style>
:root {  --primary: #212123;
}
body, html{          height: 100vh;
}
body{      background: var(--primary);
font-family:Georgia, "Times New Roman", Times, serif;
color: #fff;
display:grid;
grid-columns:60% auto;
margin: 0;
}
p{                            margin: 1em;
padding: 1em;
background-color: #333;
border-radius:10px;
color: #99F;
}
h2 {         color: #996;
}
.simplebar-scrollbar:before{background-color:#0F0;
}
.simplebar-scrollbar{margin-right:3px;
}
</style>

And the result is, as you can see below;

You can manually configure the javascript libraries as well, but then you need to initialize them first and then configure them; an option is known as ‘override’ is used, passing the object as a parameter of our Simplebar Function.

You can design it as you want since this library is lightweight. It has a simplebar.js file, a vanilla javascript custom scroll bar plugin that ensures great performance and works with all browsers.

以上是滚动条颜色的详细内容。更多信息请关注PHP中文网其他相关文章！