系统默认的滚动条样式相信大家都看得不耐烦了，尤其是把这样的滚动条使用到页面内部的时候，简直就不忍直视不是吗？ 下面给大家提供一个使用非常方便、灵活，可以完全自定义的滚动条插件，该插件已封装得非常完美了，而且文件也不大，算得上是轻量级但功能非常棒的东西。
该插件依赖于jquery库运行，引入相关资源文件后，用以下代码即可调用 <script>
(function($){
$(document).ready(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>以上代码中，注意修改“.content”选择器为自己所要添加滚动条的容器，同时要注意设置.content的宽高，设置overflow:hidden属性。 插件提供可配置的常用参数有以下的项 通过变量字面名称几乎都可以猜到各个参数的意义，在这就不作注释了，大家可以多尝试一下. $(".demo").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
},
});
文章来源 CODETC，欢迎分享，转载请注明地址：
http://www.codetc.com/article-121-1.html
|
