参考:
http://www.areaaperta.com/nicescroll/
该插件支持移动设备;
可上下、左右拖拉滚动;
看图,上面的分类菜单就是。
导入:
定义需要滚动的区域,#boxscroll是vieport, #categorys是content:。这里#categorys里的内容是动态生成的。
我这里#categorys里面动态添加的是一个一个的span
计算每一个span的长度,叠加起来就是#categorys的长度
实际上告诉niceScroll需要滚动的距离。
我也不知道为什么要计算这个,反正动态添加的元素需要这样做。
或者调用$("#mydiv").getNiceScroll().resize();试一下,反正我没试!
http://www.areaaperta.com/nicescroll/
该插件支持移动设备;
可上下、左右拖拉滚动;
看图,上面的分类菜单就是。
![](https://i-blog.csdnimg.cn/blog_migrate/add6d27b4a50202c355f5ea664017012.png)
导入:
<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});