关于IScroll多个方向滚动

IScroll的坑


之前没有接触过Iscroll这个框架,但是在维护一个项目,项目中前端页面使用到iscroll了。
本着对所掌握的框架的了解,觉得使用起来应该不是很难。

有这么一个功能,页面原本是上下滚动的,然后我需要在页面顶部加一个横向滚动的导航
原先的dom

<section id=“page”>
	<div class="scroller" >
			内容···
	</div>
</section>

这里 page是滚动的容器,iscroll的代码

new IScroll('#page');

然后我进行修改,添加了一个横向滚动的区域,dom就变成了

<section id=“page”>
	<div id = "wrapper">
		横向滚动的内容
	</div>
	<div class="scroller" >
			内容···
	</div>
</section>

结果横向滚动好使了,纵向的整体滚动不好使了。
排除法,去掉js,不好使,去掉dom,好使。

还真是dom惹的祸

查阅IScroll的资料,发现了一个使用说明

iScroll作用于滚动区域的外层。在上面的例子中,UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动,其他子元素完全被忽略。

what?早干啥去了,捂脸哭

最后解决,吧dom移到里面去就好了

<section id=“page”>
	<div class="scroller" >
			<div id = "wrapper">
				横向滚动的内容
			</div>
			内容···
	</div>
</section>

想要固定横向滚动怎么办?多加div吧,还能怎么办

<div class="content">
	<div id = "wrapper">
		横向滚动的内容
	</div>
	<section id=“page”>
		<div class="scroller" >
			内容···
		</div>
	</section>
</div>

感谢文档
http://caibaojian.com/iscroll-5/

猜你喜欢

转载自blog.csdn.net/u013513053/article/details/83142706