iScroll5横向滚动
2017-06-21 16:32
176 查看
最近做手机端页面,关于滚动条方面,在左思右想后决定使用iscroll5插件,然后就开始了漫长的填坑路~~~
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/wail.gif)
不错,这是我关于iScroll5的第二次使用,不过,由竖向滚动条换成了横向滚动条。
现在是两个不同的iScroll,分别初始化就可以了。
然后发现横向的也不可以用
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/despise.gif)
打印日志,果然和料想的一样,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>
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/wail.gif)
不错,这是我关于iScroll5的第二次使用,不过,由竖向滚动条换成了横向滚动条。
现在是两个不同的iScroll,分别初始化就可以了。
然后发现横向的也不可以用
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/despise.gif)
打印日志,果然和料想的一样,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);啦
相关文章推荐
- RecyclerView 实现横向滚动效果
- 微信小程序顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,
- 数据窗口横向滚动时用PB锁定某列
- 解决移动端web页面整个背景图横向滚动问题
- android 图片横向滚动效果 【安卓进化五】
- Android GridView 横向滚动 一行显示
- JS实现图片横向滚动效果示例代码
- 通告栏横向滚动
- 连续不间断横向滚动图片
- 上下两图的横向滚动效果(可自动可手动)-兼容IE8和Chrome浏览器!
- html中的横向广告滚动字幕
- android开发(14) 可以横向滚动的ListView(固定列头)
- 文字横向无缝滚动代码(IE FireFox兼容)
- 关于select的横向滚动条
- 微信小程序 image组件的mode属性 以及 图片出现横向滚动轴
- TextView文字横向滚动(跑马灯效果)
- 基于jQuery产品图片横向滚动 自定义滚动条
- ListView的下拉刷新上拉加载以及带列的横向滚动
- TextView 横向滚动效果的实现
- 横向滚动