自定义滚动条样式兼容所有浏览器

万恶的浏览器兼容
看人家chrome多么友好，几行css就能自定义样式，ie和火狐各种不行，如果只要求部分兼容的可以直接用css写
chorme

<div class="bar"></div>

.bar{
width:200px;
height:200px;
overflow-y:scroll;
}
.bar::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
.bar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
.bar::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

IE

IE比较少，都以颜色为主 
1.scrollbar-arrow-color: color; /三角箭头的颜色/ 
2.scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/ 
3.scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/ 
4.scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/ 
5.scrollbar-shadow-color: color; /立体滚动条阴影的颜色/ 
6.scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/ 
7.scrollbar-track-color: color; /立体滚动条背景颜色/ 
8.scrollbar-base-color:color; /滚动条的基色/

.bar{  
        scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/   
        scrollbar-face-color: #333; /**//*立体滚动条的颜色*/   
        scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/   
        scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/   
        scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/   
        scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/   
        scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/   
        scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/   
    } 

最终想要兼容还是要用js…
文档：http://manos.malihu.gr/jquery-custom-content-scroller/
引入插件
css

 <link rel="stylesheet" href="./PC/css/jquery.mCustomScrollbar.min.css" />

js

  <script src="./PC/js/jquery.mCustomScrollbar.concat.min.js"></script>

使用

  ( function ( $ )
            {
                $( window ).on( "load", function ()
                {
                    $( ".ScrollBar" ).mCustomScrollbar();
                } );
            } )( jQuery );