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内核浏览器的滚动条样式修改（个中感受自己体会）。