JQ插件:nicescroll自定义滚动条

参考:
http://www.areaaperta.com/nicescroll/

该插件支持移动设备;
可上下、左右拖拉滚动;

看图,上面的分类菜单就是。


导入:
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>


定义需要滚动的区域,#boxscroll是vieport, #categorys是content:。这里#categorys里的内容是动态生成的。
<div id="boxscroll">
	<div id="categorys">
	</div>
</div>


我这里#categorys里面动态添加的是一个一个的span
计算每一个span的长度,叠加起来就是#categorys的长度
实际上告诉niceScroll需要滚动的距离。
我也不知道为什么要计算这个,反正动态添加的元素需要这样做。
或者调用$("#mydiv").getNiceScroll().resize();试一下,反正我没试!
var w=0;
$("#categorys").children().each(function(){
	w+=$(this).outerWidth();
});

$("#categorys").width(w);
//横向滚动
$("#boxscroll").niceScroll("#categorys",{touchbehavior:true,cursorcolor:"#FF00FF",cursoropacitymax:0.6,cursorwidth:24,usetransition:true,hwacceleration:true,autohidemode:"hidden",horizrailenabled:true});
		

猜你喜欢

转载自gundumw100.iteye.com/blog/2109624