You may have noticed in mobile safari that when you scroll past the document top, the content continues dragging until you release it. This reveals an ugly grey background, and diminishes the native feel of a site; moreover, this native feel is becoming especially important to webapps and whatnot. Short and sweet.

no_overscroll

<!-- great for the heinous bounce factor on mobile safari -->
<script>
  document.addEventListener( "DOMContentLoaded", function() {

    // allow scrolling on appropriate elements lower in the DOM
    
    [].map.call(document.querySelectorAll('.scrollable'), function(el) {
      el.addEventListener('touchmove', function(e) {
        e.scrollable = true;
      });
    });
    
    // as the event bubbles back up to the root, modify the event's scrollable (custom, btw... that isn't stock) prop
    // on elems for which overscrolling is inappropriate (e.g. div#main if you follow that content-wrapping conv.) with 
    // e.scrollable = false; When the evt reaches document level, we can check if it's permitted. If not, we trash it. 
    
    document.addEventListener("touchmove", function(e){ 
      if (!e.scrollable) e.preventDefault(); 
    });
  
  });
</script>