iScroll内iScroll - 嵌套的iScroll意外行为 [英] iScroll inside iScroll - nested iScroll unexpected behavior
问题描述
我有2个列表，我使用iScroll进行垂直滚动。
第二个列表是 在 里的第一个列表。当我滚动第二个列表时，第一个列表也滚动。
我希望当我滚动内部列表（第二个列表）时，主列表（第一个列表）不会滚动。
我该怎么做？
以下是一个例子：
< div id =wrapperstyle =overflow：hidden;>
< div id =scroller>
< ul id =thelist>
< li>漂亮的第1行< / li>
< li>美丽的第2行< / li>
< li>美丽的第3行< / li>
< li>漂亮的第4行< / li>
< li>漂亮的第5行< / li>
< li>漂亮的第6行< / li>
< li id ='inWarper'>
< div id =scroller>
< br />
< ul>
< li>漂亮的第1行< / li>
< li>美丽的第2行< / li>
< li>美丽的第3行< / li>
< li>漂亮的第4行< / li>
< li>漂亮的第5行< / li>
< li>漂亮的第6行< / li>
< li>漂亮的第7行< / li>
< li>漂亮的第8行< / li>
< li>漂亮的第9行< / li>
< li>漂亮的第10行< / li>
< / ul>
< / div>
< / li>
< li>漂亮的第7行< / li>
< li>漂亮的第8行< / li>
< li>漂亮的第9行< / li>
< li>漂亮的第10行< / li>
< li>漂亮的第11行< / li>
< li>漂亮的第12行< / li>
< li>漂亮的第13行< / li>
< li>漂亮的第14行< / li>
< li>漂亮的第15行< / li>
< li>漂亮的第16行< / li>
< li>漂亮的第17行< / li>
< li>漂亮的第18行< / li>
< / ul>
< br />
< / div>
< / div>
而在Load事件中：
myScroll = new iScroll（'wrapper'）;
myScroll2 = new iScroll（'inWarper'）;
CSS：
#scroller ul {
list-style：none;
padding：0;
保证金：0;
宽度：100％;
text-align：left;
}
#scroller {
position：absolute;
z-index：1;
/ * -webkit-touch-callout：none; * /
-webkit-tap-highlight-color：rgba（0,0,0,0）;
宽度：100％;
padding：0;
}
#wrapper {
position：absolute;
z-index：1;
top：45px;
bottom：48px;
剩下：0;
宽度：100％;
背景：#aaa;
溢出：auto;
height：150px;
}
#inWarper {
颜色：红色;
位置：绝对;
z-index：1;
height：100px;
剩下：0;
宽度：100％;
背景：#aaa;
溢出：auto;
}
JSFiddle： http://jsfiddle.net/PPtWs/64/
解决这个问题的想法是防止（停止）滚动触发事件传播到父div
这是如何解决它的问题
myScroll = new iScroll（'wrapper'）;
myScroll2 = new iScroll（'inWarper'，{
onBeforeScrollStart：function（e）{
e.stopPropagation（）;
}}）;
示例
http://jsfiddle.net/khaledalyawad/4p7t8ymp/
I have 2 lists and I use iScroll for vertical scrolling.
The second list is inside the first list.
When I scroll the second list, the first list is also scrolling.
I want that when I scroll the inside list (the second list), the main list (the first list) will not scroll.
How can I do that?
Here is an Example:
<div id="wrapper" style="overflow: hidden;">
<div id="scroller">
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li id='inWarper'>
<div id="scroller">
<br/>
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
</ul>
</div>
</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
</ul>
<br/>
</div>
</div>
And in Load event:
myScroll = new iScroll('wrapper');
myScroll2 = new iScroll('inWarper');
CSS:
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller {
position: absolute;
z-index: 1;
/* -webkit-touch-callout: none; */
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
padding: 0;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #aaa;
overflow: auto;
height:150px;
}
#inWarper {
color:red;
position: absolute;
z-index: 1;
height:100px;
left: 0;
width: 100%;
background: #aaa;
overflow: auto;
}
JSFiddle: http://jsfiddle.net/PPtWs/64/
The idea to fix this problem is to prevent (stop) propagation of the scrolling firing event to the parent div
This is how to fix it
myScroll = new iScroll('wrapper');
myScroll2 = new iScroll('inWarper' , {
onBeforeScrollStart : function(e) {
e.stopPropagation();
}});
Example http://jsfiddle.net/khaledalyawad/4p7t8ymp/
这篇关于iScroll内iScroll - 嵌套的iScroll意外行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
