万恶的浏览器兼容
看人家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 );
