iScroll에서 iScroll - 중첩 된 iScroll 예상치 못한 동작

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> 

그리고 Load 이벤트 :

이

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/