当一段文本过长，使用overflow:auto属性后，这段文本所在区域将会出现滚动条。有时候，我们需要自定义浏览器的滚动条样式，可以使用css3的scrollbar-thumb属性来实现。
首先看一下这个属性的兼容性。
可见这个属性在pc端支持的并不是特别好，仅支持webkit浏览器，属性需要带有-webkit-前缀。
所以，在pc端请在Chrome或者Safari浏览器中查看效果。
再来看一下滚动条选择器的各个属性的用处。
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
上述各个属性的说明摘录自MDN（https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar）
根据以上介绍，可以写一个自定义的滚动条效果。
/* 整个滚动条的样式 */
::-webkit-scrollbar {width: 16px;height: 16px;border: 2px solid #f2f2f2;background-color: #F2F2F2;
}/* 滚动条的轨道两端按钮，允许通过点击微调小方块的位置 */
::-webkit-scrollbar-button {display: none;
}/* 滚动条的轨道样式 */
::-webkit-scrollbar-track {background-color: #F2F2F2;
}/* 内层轨道样式 */
::-webkit-scrollbar-track-piece {background-color: #f2f2f2;
}/* 滚动条里面的小方块，能上下移动 */
::-webkit-scrollbar-thumb {border-radius: 6px;box-shadow: inset 0 0 1px 0 #f2f2f2;border: 3px solid #f2f2f2;background-color: #D9D9D9;
}/* 滚动条滑块hover时样式 */
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {background-color: #c0c0c0;
}
代码运行效果如下：
还有一些伪类也可以使用于滚动条。
:horizontal
//horizontal伪类适用于任何水平方向的滚动条 :vertical
//vertical伪类适用于任何垂直方向的滚动条 :decrement
//decrement递减伪类适用于按钮和轨道碎片。它指示按钮或轨道片段在使用时是否将递减视图的位置（例如可以使区域向上或者向右移动的区域和按钮）。:increment
//increment增量伪类应用于按钮和轨道碎片。它指示按钮或轨道片段在使用时是否将增加视图的位置（例如可以使区域向下或者向左移动的区域和按钮）。:start
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面 :end
//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面 :double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。 :single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。 :no-button
no-button伪类表示轨道结束的位置没有按钮。 :corner-present
//corner-present伪类表示滚动条的角落是否存在。 :window-inactive
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。 ::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
} ::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
} ::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}
另外，:enabled，:disabled，:hover，:active伪类也可以用于滚动条。
