关于更改滚动条样式

IE下的滚动条样式

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来定义滚动条的鼠标手势。

谷歌浏览器滚动条：

/* Turn on a 13x13 scrollbar */ ::-webkit-scrollbar { width: 13px; height: 13px; }   ::-webkit-scrollbar-button:vertical { background-color: red; border: 1px dashed blue; }   /* Turn on single button up on top, and down on bottom */ ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: block; }   /* Turn off the down area up on top, and up area on bottom */ ::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement { display: none; }   /* Place The scroll down button at the bottom */ ::-webkit-scrollbar-button:vertical:increment { background-color: black; border: 1px dashed blue; }   /* Place The scroll up button at the up */ ::-webkit-scrollbar-button:vertical:decrement { background-color: purple; border: 1px dashed blue; }   ::-webkit-scrollbar-track:vertical { background-color: blue; border: 1px dashed pink; }   /* Top area above thumb and below up button */ ::-webkit-scrollbar-track-piece:vertical:start { border: 1px solid #000; }   /* Bottom area below thumb and down button */ ::-webkit-scrollbar-track-piece:vertical:end { border: 1px dashed pink; }   /* Track below and above */ ::-webkit-scrollbar-track-piece { background-color: green; }   /* The thumb itself */ ::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: yellow; }   /* Corner */ ::-webkit-scrollbar-corner:vertical { background-color: black; }   /* Resizer */ ::-webkit-scrollbar-resizer:vertical { background-color: gray; }