用css定义浏览器滚动条样式

div+css,,

这里介绍的用css定义滚动条样式，但是只能在IE下有效。

IE下的滚动条样式：

scrollbar-arrow-color: color; /*三角箭头的颜色*/
 scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
 scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
 scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
 scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
 scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
 scrollbar-track-color: color; /*立体滚动条背景颜色*/
 scrollbar-base-color:color; /*滚动条的基色*/

大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。

例：（本文在IE下的滚动条样式）

body{
scrollbar-base-color:#37AA88;
SCROLLBAR-SHADOW-COLOR:#37AA88;
SCROLLBAR-HIGHLIGHT-COLOR:#C3FFE1;
}

IE下的滚动条样式

webkit的自定义滚动条样式（360浏览器，谷歌浏览器。。。）

webkit现在支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）
::-webkit-scrollbar-corner 当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer 定义右下角拖动块的样式

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。

: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 {

/*当鼠标在水平滚动条下面的按钮上的状态*/

}

例1：（本文在360浏览器和谷歌浏览器下的滚动条样式）

::-webkit-scrollbar /*滚动条整体部分*/
{
 width:10px  /*垂直滚动条宽度*/
 height:10px  /*水平滚动条宽度*/
}

::-webkit-scrollbar-track /*外层轨道*/
{
 border-radius: 10px;
 background: #C3FFE1;
}

::-webkit-scrollbar-thumb /*滑块*/
{
 background: #37AA88; border-radius: 10px; 
}

::-webkit-scrollbar-thumb:window-inactive /*当焦点不在当前区域滑块的状态*/
{
 background: #48FDA2;
}

::-webkit-scrollbar-thumb:vertical:hover /*当鼠标在水平滚动条下面的按钮上的状态*/
{
 background: #48FDA2;
}

自定义滚动条样式

例2：

 /*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
 /*显示滚动条上方的渐增按钮*/
 ::-webkit-scrollbar-button:start:decrement,
 /*显示滚动条上方的渐减按钮*/
 ::-webkit-scrollbar-button:end:increment {
 display: block;
 }
 /*隐藏滚动条上方的渐增按钮*/
 ::-webkit-scrollbar-button:vertical:start:increment,
 ::-webkit-scrollbar-button:vertical:end:decrement {
 display: none;
 }
 /* 定义滚动条渐增按扭的样式 */
 ::-webkit-scrollbar-button:end:increment {
 background-image: url(./images/scroll_cntrl_dwn.png);
 }
 /* 定义滚动条渐减按扭的样式 */
 ::-webkit-scrollbar-button:start:decrement {
 background-image: url(./images/scroll_cntrl_up.png);
 }
 /* 垂直滚动条的第三层轨道的上段 */
 ::-webkit-scrollbar-track-piece:vertical:start {
 background-image: url(./images/scroll_gutter_top.png), url(./images/scroll_gutter_mid.png);
 background-repeat: no-repeat, repeat-y;
 }
 /* 垂直滚动条的第三层轨道的下段 */
 ::-webkit-scrollbar-track-piece:vertical:end {
 background-image: url(./images/scroll_gutter_btm.png), url(./images/scroll_gutter_mid.png);
 background-repeat: no-repeat, repeat-y;
 background-position: bottom left, 0 0;
 }
 /* 垂直滚动条的滑动块 */
 ::-webkit-scrollbar-thumb:vertical {
 height: 56px;
 -webkit-border-image: url(./images/scroll_thumb.png) 8 0 8 0 stretch stretch;
 border-width: 8 0 8 0;
 }