iScroll5横向滚动

来源：互联网发布：python计算器界面编辑：程序博客网时间：2024/06/07 05:35

最近做手机端页面，关于滚动条方面，在左思右想后决定使用iscroll5插件，然后就开始了漫长的填坑路~~~

不错，这是我关于iScroll5的第二次使用，不过，由竖向滚动条换成了横向滚动条。

现在是两个不同的iScroll,分别初始化就可以了。

然后发现横向的也不可以用

打印日志，果然和料想的一样，scrollerWidth等于wrapperWidth，查看初始化iScroll元素的子元素ul标签宽度和scrollerWidth也是一样的，于是将iScroll的ul的宽度在js文件中动态的修改，果然有可以用了，代码如下：

<nav class="tabTitle" id="nav">     <ul> <li class="active"><a>最新</a></li> <li><a>里程碑一</a></li> <li><a>里程碑二</a></li> <li><a>里程碑三</a></li> <li><a>里程碑四</a></li> <li><a>里程碑五</a></li>     </ul></nav>

if($("#nav ul li").length>5){  $("#nav ul").width($("#nav ul li").width() * $("#nav ul li").length);  myNav=new IScroll('#nav', {     mouseWheel: true,    scrollX:true,    click:true  });}

导航栏栏目多余5个时，开始横向滚动，所以加了个判断。但是核心语句就是$("#nav ul").width($("#nav ul li").width() * $("#nav ul li").length);啦

阅读全文

0 0