iScroll iScroll -嵌套iScroll意外行为

Question

我有两个列表，我使用iScroll垂直滚动。

第二个列表是 is ，第一个列表。

当我滚动第二个列表时，第一个列表也在滚动。

我希望在滚动内部列表(第二个列表)时，主列表(第一个列表)不会滚动。

我怎么能这么做？

以下是一个例子：

<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>

在负荷事件中：

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/

Answer 1

解决此问题的想法是防止滚动触发事件向父div传播(停止)。

这就是修复它的方法。

myScroll = new iScroll('wrapper');
myScroll2 = new iScroll('inWarper' , {
    onBeforeScrollStart : function(e) { 
    e.stopPropagation();
}});

示例http://jsfiddle.net/khaledalyawad/4p7t8ymp/

Answer 2

我知道这是个老生常谈，但对于任何发现这一点的人来说：

前言： iScroll现在不再维护了，所以我建议您看看一些替代方案，例如https://github.com/ustbhuangyi/better-scroll (不过，我并没有亲自尝试)。但是，如果无论出于什么原因，您必须使用iScroll，并且您想要一个平稳的行为，那么以上的答案可能不足以满足您的需要。

e.stopPropagation()的问题

当滚动实际上是首先检测正在滚动的内容，然后滚动该内容时，本机浏览器会做什么。

例如:如果你在手机上触摸一个可滚动的文本区域(想象一下在你的手机上用StackOverflow写一个答案--你可以试一试)，它会滚动这个区域，而不是它的父区域，即使你的触摸结束在这个区域之外(你滑得很远)，只要你把手指放在屏幕上。这是e.stopPropagation失败的第一种情况。

第二个问题是:如果嵌套的滚动卷完全滚动到顶部/底部，然后向该方向滚动，则上述行为将被否定，您实际上会滚动外部区域(同样，在您的移动或鼠标轮滚动时也尝试这样做)。试一试:简单地位于区域的底部，然后向下滚动一段时间，然后快速向上滚动--主滚动条将首先向下滚动，然后向上滚动--即使您的鼠标实际上位于嵌套区域之上。

溶液

唯一的方法是首先检测父iScroll (甚至本机滚动元素)，然后，只要它是“相同的滚动”，继续滚动该区域。什么是“相同的卷轴”对于触摸来说很简单(从触摸开始到触摸结束事件)，而对于鼠标滚动则有点复杂(浏览器似乎检测到一个连续滚动的“完整链”，如果你停止滚动一定时间--时间取决于浏览器，那么这取决于你在应用程序中想要什么)。

这就是我在深入研究这个问题之后才发现的。实际上，我为iScroll编写了一个工作代码，它工作非常流畅，感觉就像一个本地浏览器/应用程序行为。它比我想要的要多得多，而且很长，但是如果有人感兴趣，我可以提供上述代码。