Prevent scroll bounce for the body element, but keep it for child elements in iOS [duplicate]
OLD INFO: I've solved this: http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html
NEW INFO: This is now a jQuery plugin that can be found from here: http://www.hakoniemi.net/labs/nonbounce/.
There are several issues, like losing the zooming capability when this is applied or it's dynamic updating isn't working fluently.
But now the simplest way is to define: <div class="nonbounce">...</div> and then $.nonbounce();
I ran into the same problem and came up with this solution:
http://demo.josefkjaergaard.com/stackoverflow/element_scroll/index.html
Basically I prevent the scroll-content from being in its maximum positions.This prevents the body-scroll from being activated.
It works but it does create a little snap at the end of the easing. With a little more work this behavior could probably be hidden by offsetting the content in opposite direction.
How about this pseudo-code:
document.body.addEventListener("ontouchstart", function(event) { if(document.getElementById("main").scrollTop > 0) return; event.preventDefault(); event.stopPropagation();}, false);