滚动条的CSS属性集是从Internet Explorer 5.5开始的一个专有风格hook,这让设计师创建浏览器的滚动条的自定义主题。目前,它暴露在使用Webkit渲染引擎(和Blink),厂商前缀为Webkit的浏览器。
-webkit-scrollbar家族的属性由七种不同的伪元素组成的一个完整的滚动条UI元素:
::-webkit-scrollbar
,滚动条的背景。它通常是由其他元素覆盖。::-webkit-scrollbar-button
,滚动条方向的按钮。::-webkit-scrollbar-track
,进度条下面的空白区域。::-webkit-scrollbar-track-piece
,内层轨道,它会覆盖第三个属性的样式。::-webkit-scrollbar-thumb
,滚动条里面可以拖动的那部分。::-webkit-scrollbar-corner
,边角,两个滚动条交汇处。::-webkit-resizer
,两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
::-webkit-scrollbar {
width: 10px; /*对垂直流动条有效*/