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）*/
-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 /* 滚动条基准颜色 */

链接: http://www.fly63.com/article/detial/5824