title: iScroll a dynamically filled div ONLY without scrolling main page also
body: <p>So this post might get lengthy but I'm stuck with iScroll.  What I'm doing is populating my list with articles and when one gets clicked, I'm sliding in a div over the list to display the article.  That part works but what doesn't is when I scroll through the article and get to the end, it keeps scrolling the list with articles.  You can have a look <a href="http://www.basket.yankeesmarket.com" rel="nofollow">here</a> (the site is in russian but click on an article and scroll all the way to the bottom).  Here's my entire code:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          body{
              padding: 0;
              margin: 0;
              border: 0;
          }
          #header{
              position:fixed;
              top:0;
              left:0;
              height:100px;
              width: 100%;
              background-color: black;
          }
          header{
              position: absolute;
              z-index: 2;
              top: 0; left: 0;
              width: 100%;
              height: 50px;
          }
          #wrapper{
              position: absolute;
              z-index: 1;
              width: 100%;
              top: 52px;
              left: 0;
              overflow: auto;
          }
          #container{
              position:fixed;
              top:0;
              right:-100%;
              width:100%;
              height:100%;
              z-index: 10;
              background-color: red;
              overflow: auto;
          }
          #content{
              margin:100px 10px 0px 10px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;Main News&lt;/header&gt;
      &lt;div id="wrapper"&gt;
          &lt;ul id="daily"&gt;&lt;/ul&gt;
          &lt;ul id="exclusive"&gt;&lt;/ul&gt;
          &lt;ul id="must"&gt;&lt;/ul&gt;
          &lt;ul id="main"&gt;&lt;/ul&gt;
          &lt;ul id="ukr"&gt;&lt;/ul&gt;
          &lt;ul id="nba"&gt;&lt;/ul&gt;
          &lt;ul id="euro"&gt;&lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="container"&gt;
          &lt;div id="wrapper2"&gt;
              &lt;div id="header"&gt;
                  &lt;button onclick="hide();"&gt;Back&lt;/button&gt;
              &lt;/div&gt;
              &lt;div id="content"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="js/zepto.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          //AJAX requests to fill the li's...
          function sayhi(url){
              $('#container').animate({
                  right:'0',
              }, 200, 'linear');
              $.ajax({
                  url: serviceURL + "getnewstext.php",
                  data: {link: url},
                  success: function(content){
                      $('#content').append(content);
                  }
              });
          }
          function hide(){
              $('#container').animate({
                  right:'-100%'
              }, 200, 'linear');
              $('#content').empty();
          }
      &lt;/script&gt;
      &lt;script src="js/iscroll-lite.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var myScroll;
          function scroll () {
              myScroll = new iScroll('wrapper2', {hScroll: false, vScrollbar: false, bounce: false});
              myScroll2 = new iScroll('wrapper', {hScroll: false, vScrollbar: false});
          }
          document.addEventListener('DOMContentLoaded', scroll, false);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is there a way to scroll on the div container, or content, or wrapper2 without scrolling the wrapper div with the list of articles?  Maybe I'm not using iScroll correctly?  The same problem happens on Android and iPhone.</p>
  
  <p>EDIT 1:</p>
  
  <p>I set the wrapper position to fixed.  Now the div container is the only one scrolling but the list of articles isn't scrolling...I added another iScroll to the wrapper but it's not working.  Any advice here?</p>
  
  <p>EDIT 2:</p>
  
  <p>So I dropped iScroll all together and trying with CSS instead.  To my onclick events I added:</p>
  
  <pre><code>$('body').css('overflow', 'hidden');
  </code></pre>
  
  <p>And when the close button is clicked I changed the overflow to auto.  Now this stops the body from scrolling in a browser but not on mobile!!!  How can I make it do the same thing on mobile???</p>