iOS: disable bounce scroll but allow normal scrolling

Question

I don't want the content of my site sloshing around when the user hits the edge of a page. I just want it to stop.

The omni-present javascript solution I see everywhere is this:

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

But this prevents scrolling entirely. Is there way to just remove the bounce. Preferably with CSS or a meta tag as opposed JS, but anything that works will do.

Answer 1

Disable bouncing by prevent the default behaviour of the document:

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

Allow scrolling by prevent that the touch reaches the document level (where you would prevent the scrolling):

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

Mind the difference between these two:

event.stopPropagation()
event.preventDefault()

StopPropagation should be your choice here ! Here is a very good explanation: http://davidwalsh.name/javascript-events

Edit: Same problem, same solution: document.ontouchmove and scrolling on iOS 5

Edit2: fixed typo in variable names added brackets after methods

Answer 2

If apply to Desktop Browser, don't need any JavaScript codes, just few lines of CSS codes:

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}

Answer 3

I tried lots of different approaches I found here on stackoverflow, but iNoBounce was the thing that really worked for me: https://github.com/lazd/iNoBounce

I just included it in my index.html:

<script src="inobounce.js"></script>