兼容IE的滚动条自定义样式

废话不多说，直接上；

IE专属的滚动条样式定义，只能设置各种原始结构的颜色，宽高结构等其他样式无法修改；

div{

　　 scrollbar-arrow-color: red; /*三角箭头的颜色*/

　　scrollbar-face-color: green; /* 立体滚动条的颜色（包括箭头部分的背景色） */

　　scrollbar-3dlight-color: blue; /* 立体滚动条亮边的颜色 */

　　scrollbar-highlight-color: #ddd; /* 滚动条的高亮颜色（左阴影？） */

　　scrollbar-shadow-color: pink;/* 立体滚动条阴影的颜色 */

　　scrollbar-darkshadow-color: #ccc;/* 立体滚动条外阴影的颜色 */

　　scrollbar-track-color: orange; /* 立体滚动条背景颜色 */

　　scrollbar-base-color: yellow;/* 滚动条的基色 */
　}

webkit内核浏览器的滚动条样式美化：

#scroll-1 div {
　　width:400px;
　　height:400px;
　　}
#scroll-1::-webkit-scrollbar {　　::-webkit-scrollbar //滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
　　width:60px;
　　height:10px;
　　}
#scroll-1::-webkit-scrollbar-button{　　::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果.
　　background-color:black;
　　}
#scroll-1::-webkit-scrollbar-track{　　::-webkit-scrollbar-track // 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
　　background:blue;
　　display: none;
　　}
#scroll-1::-webkit-scrollbar-track-piece {　　::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分。
　　background:green;
　　}
#scroll-1::-webkit-scrollbar-thumb{　　::-webkit-scrollbar-thumb //滚动条里面可以拖动的那部分,即滚动条。
　　background:pink;
　　border-radius:200px;
　　}
#scroll-1::-webkit-scrollbar-corner {　　::-webkit-scrollbar-corner //边角.
　　background:#ddd;
　　}
#scroll-1::-webkit-scrollbar-resizer {　　::-webkit-resizer //定义右下角拖动块的样式.
　　background:red;
　　}

html部分：

　　<div id="scroll-1" style="width: 500px; height: 300px; border: 2px solid #1F1F1F; margin: 20px auto; overflow: auto; ">
　　　　<div style="margin:0 auto;;height:800px;border:1px solid #ddd;width:400px;">内容部分内容部分</div>
　　</div>

以上就是ie和webkit内核浏览器的滚动条样式修改（个中感受自己体会）。

 

最后：

另外我还找到一种可以修改IE支持的浏览器的样式的插件！试了一下，感觉还可以，只是插件内的代码还不是很懂；

首先引入JQuery库，再引入zUI.js这个插件，

写入你自己修改的样式代码（这个选择器应该是插件中可识别的，不是很懂，但能用）：

.zUIpanelScrollBox,.zUIpanelScrollBar{
　　width:10px;
　　top:4px;
　　right:2px;
　　border-radius:5px;
}
.zUIpanelScrollBox{
　　background:black;opacity:0.1;
　　filter:alpha(opacity=10);
}
.zUIpanelScrollBar{
　　background:red;opacity:0.8;
　　filter:alpha(opacity=80);
}

最后对插件进行初始化即可

　　$(function(){
　　　　$("#scroll-1").panel({iWheelStep:32});
　　　});

　　iWheelStep:32；滚动条滚动的速度，可修改。

火狐的暂时还没有兼容到，后期学习到再补上。

 (PS:一起学习，共同进步！有不对的地方希望大佬们帮忙纠正，万分感谢!)