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>