滚动条样式 IE与webkit内核浏览器

首先讨论IE的情况，IE的情况不是很灵活，只是简单的让你设置颜色值：

1. scrollbar-arrow-color: color; /*滚动条两端三角箭头的颜色*/ 
2. scrollbar-face-color: color; /* 拖动块背景颜色 */ 

1. scrollbar-shadow-color: color; /*拖动块的边框的颜色*/ 

1. scrollbar-track-color: color; /*除拖动块以外背景颜色*/ 

1. scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ /*ie10上的效果本人没有看到*/
2. scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/  /*ie10上的效果本人没有看到*/
3. scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/  /*ie10上的效果本人没有看到*/
4. scrollbar-base-color:color; /*滚动条的基色*/  /*ie10上的效果本人没有看到*/

webkit内核浏览器：

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处的

这是几个伪类，就想:after一样使用就好了

::-webkit-scrollbar-track-piece{
 background-color:#E2E2E2;
 -webkit-border-radius:0;
}

::-webkit-scrollbar{
 width:8px;
 height:8px;
}

::-webkit-scrollbar-track {
 background:#E2E2E2;
}

::-webkit-scrollbar-thumb{
 height:50px;
 background-color:#999;
 -webkit-border-radius:4px;
 outline:2px solid #E2E2E2;
 outline-offset:-2px;
 border: 2px solid #E2E2E2;
}

::-webkit-scrollbar-thumb:hover{
 height:50px;
 background-color:#9f9f9f;
 -webkit-border-radius:4px;
}

样式图：

如果上面有误，请帮忙解答，谢谢！