0
点赞
收藏
分享

微信扫一扫

JQ插件:nicescroll自定义滚动条


参考:


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



该插件支持移动设备;


可上下、左右拖拉滚动;



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


JQ插件:nicescroll自定义滚动条_javascript



导入:

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


  • JQ插件:nicescroll自定义滚动条_动态添加_02

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

相关推荐

0 条评论