title: Issue with a scrollable div on ipad
body: <p>I'm designing an HTML/JS app for consumption specifically on iPad.  In the app, there are some scrollable elements.</p>
  
  <p>I set the document's width and height to 1024 and 768 respectively.  I set the view port to</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /&gt;
  </code></pre>
  
  <p>I then use class</p>
  
  <pre><code>.scrollable {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
  }
  </code></pre>
  
  <p>for the scrollable divs to make them scroll properly.  Finally, I use a bit of javascript to stop overscroll on the document itself while allowing for scrollable divs and lists:</p>
  
  <pre><code>$(document).on('touchmove',function(e){
      e.preventDefault();
  });
  
  //uses body because jquery on events are called off of the element they are
  //added to, so bubbling would not work if we used document instead.
  $('body').on('touchstart','.scrollable',function(e) {
      if (e.currentTarget.scrollTop === 0) {
          e.currentTarget.scrollTop = 1;
      } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
          e.currentTarget.scrollTop -= 1;
      }
  });
  
  //prevents preventDefault from being called on document if it sees a scrollable div
  $('body').on('touchmove','.scrollable',function(e) {
      e.stopPropagation();
  });
  </code></pre>
  
  <p>All of this works - mostly.  However there is one snag.  If the scrollable element does not contain enough content to require scrolling, attempting to scroll it starts the overscroll on the whole document.  I've read through hundreds of blogs and other SO questions, but can't find a solution to this.  Any ideas are greatly appreciated.</p>