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});

• 

• 大小: 119.7 KB
• jquery.nicescroll.min.zip (15.2 KB)
• 下载次数: 0
• 查看图片附件