title: iScroll inside iScroll - nested iScroll unexpected behavior
body: <p>I have 2 lists and I use iScroll for vertical scrolling.     </p>
  
  <p>The second list is <strong><em>inside</em></strong> the first list.</p>
  
  <p>When I scroll the second list, the first list is also scrolling.<br>
  I want that when I scroll the inside list (the second list), the main list (the first list) will not scroll.</p>
  
  <p>How can I do that?</p>
  
  <p>Here is an Example:</p>
  
  <pre><code>&lt;div id="wrapper" style="overflow: hidden;"&gt;
      &lt;div id="scroller"&gt;
          &lt;ul id="thelist"&gt;
              &lt;li&gt;Pretty row 1&lt;/li&gt;
              &lt;li&gt;Pretty row 2&lt;/li&gt;
              &lt;li&gt;Pretty row 3&lt;/li&gt;
              &lt;li&gt;Pretty row 4&lt;/li&gt;
              &lt;li&gt;Pretty row 5&lt;/li&gt;
              &lt;li&gt;Pretty row 6&lt;/li&gt;
              &lt;li id='inWarper'&gt;
                  &lt;div  id="scroller"&gt;
                      &lt;br/&gt;
                      &lt;ul&gt;
              &lt;li&gt;Pretty row 1&lt;/li&gt;
              &lt;li&gt;Pretty row 2&lt;/li&gt;
              &lt;li&gt;Pretty row 3&lt;/li&gt;
              &lt;li&gt;Pretty row 4&lt;/li&gt;
              &lt;li&gt;Pretty row 5&lt;/li&gt;
              &lt;li&gt;Pretty row 6&lt;/li&gt;
              &lt;li&gt;Pretty row 7&lt;/li&gt;
              &lt;li&gt;Pretty row 8&lt;/li&gt;
              &lt;li&gt;Pretty row 9&lt;/li&gt;
              &lt;li&gt;Pretty row 10&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;Pretty row 7&lt;/li&gt;
              &lt;li&gt;Pretty row 8&lt;/li&gt;
              &lt;li&gt;Pretty row 9&lt;/li&gt;
              &lt;li&gt;Pretty row 10&lt;/li&gt;
              &lt;li&gt;Pretty row 11&lt;/li&gt;
              &lt;li&gt;Pretty row 12&lt;/li&gt;
              &lt;li&gt;Pretty row 13&lt;/li&gt;
              &lt;li&gt;Pretty row 14&lt;/li&gt;
              &lt;li&gt;Pretty row 15&lt;/li&gt;
              &lt;li&gt;Pretty row 16&lt;/li&gt;
              &lt;li&gt;Pretty row 17&lt;/li&gt;
              &lt;li&gt;Pretty row 18&lt;/li&gt;
          &lt;/ul&gt;
           &lt;br/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in Load event:</p>
  
  <pre><code>myScroll = new iScroll('wrapper');
  myScroll2 = new iScroll('inWarper');
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/PPtWs/64/" rel="nofollow">http://jsfiddle.net/PPtWs/64/</a></p>