Question

我有2个列表，我使用iScroll进行垂直滚动。

第二个列表是第一个列表中的。

当我滚动第二个列表时，第一个列表也在滚动我希望当我滚动内部列表（第二个列表）时，主列表（第一个列表）将不会滚动。

我该怎么做？

这是一个例子：

<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失败的第一种情况。

第二个问题是：如果嵌套滚动完全滚动到顶部/底部，并且您朝那个方向滚动，则上述行为被否定，并且您实际上滚动了外部区域（再次尝试在移动设备上或什至在鼠标上尝试-滚轮）。尝试一下：只需在某个区域的底部，然后向下滚动一会儿，然后快速向上滚动- main 滚动条将首先向下滚动，然后向上滚动-即使您的鼠标实际上是在嵌套区域上。

解决方案

唯一的解决方法是首先检测父级iScroll（甚至是本地滚动元素），然后，只要它是“相同的滚动”，就继续滚动该区域。什么是“相同的滚动”对于触摸来说很简单（从触摸开始到触摸结束事件），而对于鼠标滚动来说则有点复杂（浏览器似乎检测到后续滚动的“不间断的链”，如果停止滚动则断开）在特定时间内-时间取决于浏览器，因此取决于您自己想要在应用中使用什么。）

这是我深入研究之后想到的。我实际上有一个iScroll的工作代码，该代码工作非常流畅，感觉就像本机浏览器/应用程序的行为。这项工作比我想要的要多得多，而且很长，但是如果有人感兴趣，我可以提供所说的代码。

iScroll里面的iScroll - 嵌套的iScroll意外行为

2 个答案: