自定义 webkit 内核浏览器的滚动条样式
回想当年，你可以通过在可滚动的元素（例如 <body>）上使用非标准的 CSS 属性（例如 scrollbar-base-color 之类）来 自定义 IE(5.5) 浏览器滚动条样式，并且可以实现 rad-scrollbars。不过后来 IE 弃用了它们。
最近，自定义滚动条又回来了，不过是在 Webkit 内核中。相比之前，这次的属性名字加了供应商前缀（例如 ::-webkit-scrollbar）并且使用了 "Shadow DOM"。这些其实已经存在了几年了。David Hyatt 在 2009 年就写了一篇 博文 并且把几乎你期待的所有滚动条样式的组合都整合成了一个范例页面。
干货
不同的部件
下面是一些伪元素以及它们实际对应的滚动条的部件。
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
不同的状态
下面是一些伪类选择器。它们可以用于选择不同状态下的各种部件。
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive这部分的介绍我打算直接引用 Webkit 博客上 David 的博文，因为他介绍的非常棒：（译者注：指代伪元素部件的部分保留其英文名，方便与上文对照）
:horizontal – horizontal 伪类应用于每一个水平方向上的滚动条部件。 :vertical – vertical 伪类应用于每一个垂直方向上的滚动条部件。 :decrement – decrement 伪类应用于 button 和 track piece，表示 button 或 track piece 的负向（例如垂直滚动条的向上和水平滚动条的向左）部分。 :increment – increment 伪类应用于 button 和 track piece，表示 button 或 track piece 的正向（例如垂直滚动条的向下和水平滚动条的向右）部分。 :start – start 伪类应用于 button 和 track piece，表示 thumb 之前的部分。 :end – start 伪类应用于 button 和 track piece，表示 thumb 之后的部分。 :double-button – double-button 伪类应用于 button 和 track piece。用于 button 表示滚动条的同一端有一对按钮；用于 track piece 表示是否紧邻一对按钮。 :single-button – double-button 伪类应用于 button 和 track piece。用于 button 表示滚动条的同一端只有一个按钮；用于 track piece 表示是否紧邻单独的按钮。 :no-button – no-button 伪类应用于 track piece，表示 track piece 是否移动到了滚动条的边缘。例如 track 的某一端没有按钮。 :corner-present – corner-present 伪类应用于滚动条的所有部件，表示是否显示滚动条的 corner。 :window-inactive – window-inactive 伪类应用于所有滚动条的部件，表示包含滚动条的窗口当前是否是激活的。（在最新版中这个伪类也可作用于 ::selection。我们打算把它扩展至所有内容并推动它成为一个新的标准伪类。）
组合使用
上面介绍的伪元素和伪类选择器可以组合使用。下面举几个例子：
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}简单的例子
可以按照下面这样来实现一个简单的自定义滚动条：
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}我们可以在一个有纵向滚动条的 div 中看见效果：
实际应用
可以在 Tim Van Damme 的博客看到非常精致漂亮的滚动条。（2012 年 9 月更新：Tim 的博客已经不再使用这个设计了）：
这里有一点特别好的是，滚动条是在 body 元素上的，所以滚动条的并不是像常见的那样贴在顶部、底部和浏览器窗口的右侧。我通过复制和粘贴做了一个类似效果的测试页面：
查看例子
在 Forrst 网站，他们在代码片段部分也使用了很棒自定义滚动条。那些滚动条不那么抢眼，尽量减少了对于代码高亮的影响：
往期精选文章 |
|---|
使用虚拟dom和JavaScript构建完全响应式的UI框架 |
扩展 Vue 组件 |
使用Three.js制作酷炫无比的无穷隧道特效 |
一个治愈JavaScript疲劳的学习计划 |
全栈工程师技能大全 |
WEB前端性能优化常见方法 |
一小时内搭建一个全栈Web应用框架 |
干货：CSS 专业技巧 |
四步实现React页面过渡动画效果 |
让你分分钟理解 JavaScript 闭包 |
小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。