Javascript for iOS: Elastic Scrolling without disabling all Scrolling [duplicate]

Question

I want to do two things:

1. Disable Elastic Scrolling of document
2. Enable scrolling of div.master

I know you can disable the elastic scrolling using the following:

document.addEventListener('touchmove',function(e) { e.preventDefault() },false);

However this disables all scrolling, not just the elastic scrolling. I thought maybe that you could just enable scrolling again for just the div.master but I'm not sure how you would do that.

Answer 1

Disable your page’s default scrolling with:

document.body.ontouchmove = function(e) { e.preventDefault(); }; 

or

document.body.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

and enable scrolling with some CSS:

.scrolling {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
}

To completely remove elastic scrolling you’ll have to wrap the scrolling div inside another scrolling div like that:

<div class="scrolling">
  <div class="scrolling">
    // Your content goes here
  </div>
</div>