mCustomScrollbar是基于jQuery UI的自定义滚动条插件,它可以通过CSS定义网页的滚动条,并且垂直和水平方向的滚动条都可以定义。
使用方法
引入jquery.mCustomScrollbar.css
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
加载js文件(注意加载顺序)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> <script src="jquery.mousewheel.min.js"></script> //提供滚动支持 <script src="jquery.mCustomScrollbar.js"></script>
应用mCustomScrollbar
$(selector).mCustomScrollbar();
加为容器添加内容和样式,自定义滚动条,必须要出现滚动条才可以,所以要对容器加上css来让它出现滚动条,否则是没有效果的。
width:200px;height:200px;overflow:auto;
主题
使用主题
$(selector).mCustomScrollbar({ theme:"minimal-dark" });
主题名称
“light” (default)
“dark”
“minimal”
“minimal-dark”
“light-2”
“dark-2”
“light-3”
“dark-3”
“light-thick”
“dark-thick”
“light-thin”
“dark-thin”
“inset”
“inset-dark”
“inset-2”
“inset-2-dark”
“inset-3”
“inset-3-dark”
“rounded”
“rounded-dark”
“rounded-dots”
“rounded-dots-dark”
“3d”
“3d-dark”
“3d-thick”
“3d-thick-dark”
参数
$(selector).mCustomScrollbar({
set_width:false,
set_height:false,
horizontalScroll:false,
scrollInertia:550,
scrollEasing:"easeOutCirc",
mouseWheel:"auto",
autoDraggerLength:true,
scrollButtons:{
enable:false,
scrollType:"continuous",
scrollSpeed:20,
scrollAmount:40
},
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:false,
autoExpandHorizontalScroll:false,
autoScrollOnFocus:true
},
callbacks:{
onScrollStart:function(){},
onScroll:function(){},
onTotalScroll:function(){},
onTotalScrollBack:function(){},
onTotalScrollOffset:0,
whileScrolling:false,
whileScrollingInterval:30
}
});
方法
- update 当内容变化时更新滚动条
$(selector).mCustomScrollbar("update");
- scrollTo
$(selector).mCustomScrollbar("scrollTo", position);
//position 可以是字符串(如"#id","bottom")或者是一个数值(以像素为单位)
其余两个额外的选项参数
moveDragger: Boolean
//滚动滚动条的滑块到某个位置像素单位
$(selector).mCustomScrollbar("scrollTo", 200, { moveDragger:true });
callback:Boolean
//执行回调函数 当 scroll-to 完成之后
$(selector).mCustomScrollbar("scrollTo", 200, { callback:true });
- disable 禁用滚动条
$(selector).mCustomScrollbar("disable", false);
//第二个参数可选,默认值为false;为true,禁用时滚动条回到初始位置。
//调用update()方法使滚动条重新可用
- destroy
$(selector).mCustomScrollbar("destroy");
//使滚动条恢复默认样式