转自：/a/1190000012800450
PS:非商业用途，如有侵权，请联系删除。
一 前言
在CSS 中，如果我们在块级容器上设置了属性:
overflow:scroll /* x y 方向都会*/或者overflow-x:scroll /*只是x方向*/或者overflow-y:scroll /*只是y方向*/
当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。
有时候我们需要自定义滚动条的样式，比如一开始就它显示，比如想改变滚动条的颜色，设置轨道的样式等，那么这篇文章就是为你准备的。
二 正文
1.认识滚动条
设置scrollbar的为CSS伪元素，对应上图的数字：
::-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 */ }
属性介绍：
::-webkit-scrollbar //滚动条整体部分::-webkit-scrollbar-button //滚动条两端的按钮::-webkit-scrollbar-track // 外层轨道::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个::-webkit-scrollbar-corner //边角::-webkit-resizer ///定义右下角拖动块的样式
2.设置样式
demo
进入页面，打开控制台工具，选中其中一个样式，就能看到该样式的CSS源码。
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:16px;height:16px;background-color:#F5F5F5;}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);border-radius:10px;background-color:#F5F5F5;}/*定义滑块内阴影+圆角*/::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555;}
任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。
:horizontal//适用于任何水平方向上的滚动条:vertical//适用于任何垂直方向的滚动条:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮:start//适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。:no-button//表示轨道结束的位置没有按钮。:corner-present//表示滚动条的角落是否存在。:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
用法举例：
::-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 */}
3.IE浏览器
兼容IE的参考链接：/koley...
三 后记
Chrome能很好的支持自定义滚动条，其它的浏览器在不同程度上支持自定义滚动条样式。
参
四 demo
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>.div-ul{background: #bbb;width: 300px;height: 100px;overflow-x: hidden;overflow-y: scroll;}/* 滚动条整体部分 */.div-ul::-webkit-scrollbar{width: 12px; /* 纵向滚动条宽度 */height: 12px;/* 横向滚动条高度 */background-color: #F5F5F5; /* 滚动条整体背景，一般被覆盖着 */}/* 滚动条里面的滑块 */.div-ul::-webkit-scrollbar-thumb{border-radius: 10px; /* 滚动条滑块圆角 */-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 滚动条滑块阴影 */background-color: #eceff0; /* 滚动条滑块颜色 */}/* 滚动条的轨道（里面装有Thumb） */.div-ul::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滚动条轨道阴影 */border-radius: 10px; /* 滚动条轨道圆角 */background-color: #F5F5F5; /* 滚动条轨道背景 */}</style></head><body><div><ul class="div-ul"><li>123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123</li><li>234</li><li>345</li><li>456</li><li>567</li><li>678</li><li>234</li><li>345</li><li>456</li><li>567</li><li>678</li><li>234</li><li>345</li><li>456</li><li>567</li><li>678</li></ul></div></body></html>
