title: iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
body: <p>I'm working on an iPad-based web app, and need to prevent overscrolling so that it seems less like a web page. I'm currently using this to freeze the viewport and disable overscroll:</p>
  
  <pre><code>document.body.addEventListener('touchmove',function(e){
        e.preventDefault();
    });
  </code></pre>
  
  <p>This works great to disable overscroll but my app has several scrollable divs, and <strong><em>the above code prevents them from scrolling</em></strong>.</p>
  
  <p>I'm targeting iOS 5 and above only so I've avoided hacky solutions like iScroll. Instead I'm using this CSS for my scrollable divs:</p>
  
  <pre><code>.scrollable {
      -webkit-overflow-scrolling: touch;
      overflow-y:auto;
  }
  </code></pre>
  
  <p>This works without the document overscroll script, but doesn't solve the div scrolling problem.</p>
  
  <p><strong><em>Without a jQuery plugin,</em></strong> is there any way to use the overscroll fix but exempt my $('.scrollable') divs?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I found something that's a decent solution:</p>
  
  <pre><code> // Disable overscroll / viewport moving on everything but scrollable divs
   $('body').on('touchmove', function (e) {
           if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
   });
  </code></pre>
  
  <p>The viewport still moves when you scroll past the beginning or end of the div. I'd like to find a way to disable that as well.  </p>