浏览器横向滚动条：自定义滚动条样式
浏览器横向滚动条：自定义滚动条样式
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/
引入插件：
css <link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" /> js <script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
Html Code
<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);
}
