CSS设置滚动条样式
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 /* 滚动条的轨道（包含thumb和trace-piece）*/
css设置表格滚动条
-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滚动条样式重置
IE中只能修改滚动条颜⾊
scrollbar-arrow-color:#f2f2f3;  /*上下箭头*/
scrollbar-track-color  /*底层背景⾊*/
scrollbar-face-color  /*滚动条前景⾊，对应thumb*/
scrollbar-shadow-color /*滚动条边线⾊,thubm的border*/
scrollbar-highlight-color  /*滚动条整体颜⾊*/
scrollbar-base-color /* 滚动条基准颜⾊ */

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。