webkit滚动条样式重置
1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。
2、scrollbar corner为横向和竖向的交叉角区域
3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件
组成结构图如下：
一旦发现滚动条的自定义样式，浏览器的默认样式设置将会失效，只使用在css定义的样式。也就意味值不能单独只设置scrollbar button或scrollbar track。
-webkit-scrollbar -webkit-scrollbar-button -webkit-scrollbar-track -webkit-scrollbar-track-piece -webkit-scrollbar-thumb -webkit-scrollbar-corner -webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */
可以结合以下伪类进行设置（不同的操作系统浏览器滚动条可能不一样，所有可以根据下面伪类来设置）：
- :horizontal 水平方向的track、track-piect、thumb
- :vertica 垂直方向的track、track-piect、thumb
- :decrement 向上和向左按钮的button、向上或向左的track-piece
- :increment 向下和向右按钮的button、向下和向右的track-piece
- :start 适用于buttons和track pieces,对象（buttons 或 trace piece）是否放在滑块的前面
- :end 适用于buttons和track pieces,对象（buttons 或 trace piece）是否放在滑块的后面
- :double-button 适用于buttons和track pieces，轨道结束的位置是否是一对按钮
- :single-button 适用于buttons和track pieces，轨道结束的位置是否是一个按钮
- :no-button 适用于track pieces，轨道结束的位置没有按钮
- :corner-present 适用于所有scrollbar,滚动条的角落是否存在
- :window-inactive 适用于所有scrollbar,包含滚动条的区域，焦点不在该窗口的时候
- :enabled, :disabled, :hover , :active 这些伪类同样适用
IE中只能修改滚动条颜色
scrollbar-arrow-color:#f2f2f3; scrollbar-track-color scrollbar-face-color scrollbar-shadow-color scrollbar-highlight-color scrollbar-base-color
参考资料
Styling Scrollbars | Webkit
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
