iScroll5横向滚动

最近做手机端页面,关于滚动条方面,在左思右想后决定使用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);啦


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值