自定义滚动条现在越来越流行，很值得研究一翻 。为什么需要自定义滚动？浏览器的默认的滚动条让UI在多个操作系统中看起来不一致，使用定义滚动我们可以统一风格 。
我一直对如何在CSS中定制滚动条很感兴趣，但一直没有机会这样做 。今天，我就记录一下自己的学习过程 。
首先需要介绍一下滚动条的组成部分 。滚动条包含 track 和 thumb，如下图所示：
track是滚动条的基础，其中的 thumb是用户拖动支页面或章节内的滚动 。
还有一件重要的事情要记住，滚动条可以水平或垂直地工作，这取决于设计 。另外，在一个多语言网站上工作时，这一点也会发生变化，该网站在从左到右（LTR）和从右到左（RTL）两个方向上工作 。
拥有一个自定义的滚动条曾经是的专利，所以和IE被排除在游戏之外 。我们有一种新的语法，只在中使用，当它被完全支持时，将使我们的工作更容易 。我们先看一下旧的语法，然后再介绍新的语法 。
滚动条的宽度
首先，我们需要定义滚动条的大小 。这可以是垂直滚动条的宽度，也可以是水平滚动条的高度 。
.::-- {
width: 10px;
}
有了这一设置，我们就可以设置滚动条本身的样式 。
滚动条 track
这代表了滚动条的基础 。我们可以通过添加、、-和来对它进行造型 。
.::---track {
-color: ;
}
滚动条 thumb
准备好了滚动条的基础后，我们就需要对滚动条的thumb进行样式设计 。这很重要，因为用户可能会拖动这个thumb与滚动条进行交互 。
.::---thumb {
box-: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
至此，我们已经介绍了CSS中定制滚动条的老方法 。让我们探索一下新的语法 。
Width
正如它所说的，这定义了滚动条的宽度，有两个值auto 和 thin 。不好的地方就是，我们不能像的语法那样定义一个具体的数字 。
. {
-width: thin;
}
Color
有了这个属性，我们可以为滚动条 track和thumb定义成对值的颜色 。
. {
-color: # #;
-width: thin;
}
尽管这个新语法很简单，但它是有限制的 。我们只能添加颜色 。我们不能添加``、、`，或任何类似的东西，我们被允许定制的只是颜色 。
要知道的一个重要问题是，在哪里定制滚动条 。你希望样式是通用的，对网站上的所有滚动条都有效吗？还是你只想让它用于特定的部分？
使用旧的语法，我们可以编写选择器，而不必将它们附加到元素上，它们将应用于所有可滚动的元素 。
::-- {
width: 10px;
}
::---track {
-color: ;
}
::---thumb {
box-: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
如果你想只适用于一个特定的部分，你需要在选择器之前附加元素 。
.::-- {
width: 10px;
}
.::---track {
-color: ;
}
.::---thumb {
box-: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
对于新的语法，它几乎是一样的 。我注意到的是，如果你想要一个通用的样式，它应该被应用于元素，而不是 。
html {
-color: # #;
-width: thin;
}
我尝试为添加上面的内容，但它没有像预期的那样工作 。
现在我们知道了新旧语法的工作原理，接着，我们开始定制一些滚动条设计 。
例1
在研究定制滚动条之前，值得讨论一下Mac OS中的默认样式 。下面是它的外观 。
滚动条track 的左右两边都有边框，背景色为纯色 。
滚动条thumb是圆形的，左右两边都有空间 。
对于，它有点不同 。
【css滚动条实现步骤及美化小技巧滚动条css设置】