Prevent scroll bounce for the body element, but keep it for child elements in iOS [duplicate]

Solution 1:

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();

Solution 2:

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.

Solution 3:

Here are some useful resources I found on the subject:

• https://github.com/joelambert/ScrollFix
• http://apdevblog.com/optimizing-webkit-overflow-scrolling/
• http://www.hakoniemi.net/labs/nonbounce/
• http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
• http://cubiq.org/iscroll-4