简介
自定义滚动条正变得越来越流行，您可能会遇到具有独特滚动条的网站，这让这些网站的感觉和外观都有所不同。基本上有几种方法可以实现自定义滚动条。
在本教程中，我们将使用CSS3，这是最简单的方法。不过，有jQuery插件可以帮助定制滚动条，但我不喜欢在我的网站上添加更多的JavaScript。如果你是一个设计师，摄影师，或者你只是想让你的网站有一个很酷的滚动条，继续使用jQuery插件。
了解滚动条术语
自定义滚动条显示在-webkit供应商前缀后面，以便在使用Webkit(和Blink)呈现引擎的浏览器中使用。
的屏幕快照
-webkit-scllbar由7个不同的伪元素组成，共同构成一个完整的滚动条UI元素：
1.：：-webkit-scllbar条本身的背景。
2.滚动条上的方向按钮：：-webkit-scllbar-Button。 3.：：-webkit-scllbar-track进度条下方的空白处。 4.：：-webkit-滚动条-轨迹-片段进度条的最顶层没有被拇指覆盖。 5.：：-webkit-scllbar-thumb可拖动的滚动元素根据可滚动元素的大小调整大小。 6.：：-webkit-scllbar-corner可滚动元素的底角，即两个滚动条相交的位置。 7.：：-webkit-renzer`部分元素下角滚动条上方的可拖动大小手柄。
现在您已经熟悉了术语，让我们开始吧！
设置项目
首先创建index.html和style.css文件，并使用代码编辑器打开当前目录。
1[label index.html]
2<!DOCTYPE html>
3<html>
4 <head>
5 <meta charset="UTF-8" />
6 <title>Customize the Browser's Scrollbar with CSS</title>
7 <link type="text/css" rel="stylesheet" href="styles.css">
8 </head>
9 <body>
10 <div class="scrollbar" id="style-1">
11 <div class="force-overflow"></div>
12 </div>
13 </body>
14</html>
您需要将style le.css文件包含在该HTML文件中。您可以键入上面的HTML代码，也可以直接复制粘贴到您的HTML文件中。
首先设置.scllbar(类)宽度、高度、背景颜色，然后设置overflow-y：scll得到垂直滚动条。我们将min-Height：450px设置为.force-overflowdiv，这样滚动条就会出现(因为我们使用overflow-y属性在.scllbar类中滚动)。
1[label styles.css]
2.scrollbar {
3 background-color: #F5F5F5;
4 float: left;
5 height: 300px;
6 margin-bottom: 25px;
7 margin-left: 22px;
8 margin-top: 40px;
9 width: 65px;
10 overflow-y: scroll;
11}
12
13.force-overflow {
14 min-height: 450px;
15}
当前默认外观的屏幕截图
现在，我们使用ScrollBar伪元素来创建自定义滚动条。它会将默认宽度替换为新的宽度6px，然后添加背景颜色：# F5F5F5。
1[label styles.css]
2#style-1::-webkit-scrollbar {
3 width: 6px;
4 background-color: #F5F5F5;
5}
既然我们知道滚动条包含了'track'，'button'和'thumb'，我们现在要给thumb一个时尚的外观。我们使用伪元素（即，：：-webkit-scrollbar-thumb)，前缀为-webkit，并设置scrollbar-thumb background- color。
1[label styles.css]
2#style-1::-webkit-scrollbar-thumb {
3 background-color: #000000;
4}
之后，滚动条如下所示：
的屏幕截图
我们在scllbar-track上使用了box-shadow，使其更时尚，并增加了滚动条和滚动条-track之间的对比度。
1[label styles.css]
2#style-1::-webkit-scrollbar-track {
3 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
4 background-color: #F5F5F5;
5}
结论
在本文中，我们介绍了：
- 定制滚动条不再少见。你会在主要的网站和博客中找到它们，特别是个人投资组合网站。
- 有大量的jQuery插件可以帮助定制滚动条。
- 自定义滚动条显示在
-webkit供应商前缀后面。 - 滚动条的基本结构。
- 与滚动条相关的术语。
Css定制滚动条的方式很简单，但看起来有点粗糙。然而，Windows、OS X和Linux等操作系统都有自己的滚动条风格。这反过来可能会导致不希望看到的结果和设计的不一致。记住，你应该保持简单，愚蠢(接吻)，不要太花哨。
我已经使用上面的过程创建了更多的滚动条。我在演示中使用了codePen，您可以在CodePen.上找到本教程的完整代码
的自定义滚动条
就这样。但愿你能喜欢!
一定要在下面的评论中留下任何想法、问题或顾虑。我很想看看他们。