6

I would like to disable the iOS overscroll in a webapp but still allow the body to be scrolled.

$(document).on('touchmove', function(e) {
    e.preventDefault();
});

disables scrolling altogether (as one would expect).

Is there a way to do what I want to do?

Michael Bates
  • 1,884
  • 2
  • 29
  • 40
  • It is an answer to a related question, though it covers this issue as well, http://stackoverflow.com/questions/2890361/disable-scrolling-in-an-iphone-web-application/26853900?stw=2#26853900. – Gajus Nov 11 '14 at 00:02
  • I have found this script which fix this problem! :) https://github.com/lazd/iNoBounce – Jan Šafránek Nov 15 '15 at 10:26

2 Answers2

7

I had pretty much the same issue. This should help you:

// Disable overscroll / viewport moving on everything but scrollable divs
 $('body').on('touchmove', function (e) {
         if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
 });
Community
  • 1
  • 1
Jeff
  • 1,294
  • 2
  • 9
  • 6
  • 6
    One challenge with this is that if you've scrolled all the way to the top or bottom, you can still overscroll the entire page! – Chet Jul 22 '14 at 00:10
2
document.body.addEventListener('touchmove',function(e){
     if(!$(e.target).hasClass("scrollable")) {
       e.preventDefault();
     }
 });

Try this i just got in via google

Okky
  • 10,338
  • 15
  • 75
  • 122
  • Yer so I added the scrollable class to body (because that's what I want to be able to scroll) but it still leaves the body unscrollable (and removes the overscroll) – Michael Bates May 11 '12 at 07:06