codetc - 网站开发技术 首页 资源 插件 查看内容

使用方便简单且可自定义的JQuery滚动条

2015-1-15 20:01| 发布者: CODETC| 查看: 2184| 评论: 0

系统默认的滚动条样式相信大家都看得不耐烦了,尤其是把这样的滚动条使用到页面内部的时候,简直就不忍直视不是吗?

下面给大家提供一个使用非常方便、灵活,可以完全自定义的滚动条插件,该插件已封装得非常完美了,而且文件也不大,算得上是轻量级但功能非常棒的东西。


该插件依赖于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

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部