css更改滚动条样式（兼容所有浏览器方案）

在我们实际开发过程中可能会遇到页面出现滚动条的情况，但是在常规情况下滚动条的默认样式咱们试不敢恭维的，所以咱们就需要对滚动条的一些样式进行调整，换成自己想要的样式，那具体怎么做那，咱们一起来看看。

1、友好的谷歌，几行css样式就可以搞定

/* 滚动条样式 */
.task-scrollbar{
		width:200px;
		height:300px;
		overflow-y:scrool;
}
.task-scrollbar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }
.task-scrollbar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(20, 72, 8,0.3);
    background   : #0097fb;
    }
.task-scrollbar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(255, 0, 0, 0.2);
    border-radius: 10px;
    background   : #f5f8fa;
}

2、IE浏览器

.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/

引入插件：

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

Html代码：

<div class="mCustomScrollbar content"data-mcs-theme="dark"> 
  <!-- your content -->
</div>

//引用：
$(".content").mCustomScrollbar({
  theme:"dark"
  axis:"x" // horizontal scrollbar
  axis:"yx" // vertical and horizontal scrollbar
  callbacks:{
        onScroll:function(){
            myCustomFn(this);
        }
    }
});
function myCustomFn(el){
    console.log(el.mcs.top);
}