iPhone Web App - Stop body bounce/scrolling in iOS

Question

Yes, I know. This question has been asked a thousand times before. Thanks to all you guys, I was able to find a solution that finally did the job for me in <= iOS7. However, after updating to iOS 8 - nothing seems to work!

What worked perfectly for me in iOS7

Css

html, body, .scrollable {
overflow: auto; 
-webkit-overflow-scrolling: touch;
}

jQuery

$(function() {
  $(document).on("touchmove", function(evt) { evt.preventDefault() });
  $(document).on("touchmove", ".scrollable", function(evt) { evt.stopPropagation() });
});

Other solutions I've tried:

All here: iPhone Web App - Stop body scrolling

And here: iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?

And here: Disable iOS Overscroll but allow body scrolling

And more ...

So, does anyone know an iOS8 compatible way of disabling the body out of bounds scroll / bounce effect (besides from native solutions applied to phonegap projects)?

Answer 1

So this has been bothering me for ages too and I finally found a solution!

Pre iOS8, Safari has no subpixel rendering. Now that there is subpixel rendering, the reported element height is given as the subpixel decimal, and the scroll height is the actual rendered integer heigh. If you specify sizes in percent, this can result in the height being a fraction of a pixel smaller than it should be.

Instead of testing for

if (elem[0].scrollHeight > height) {
                    e.stopPropagation();
}

Testing for this will give you the rounded number that matches up.

if (elem[0].scrollHeight > Math.ceil(height)) {
                    e.stopPropagation();
}

Answer 2

This, combined with the fact that position: fixed gets respected more reliably, allows for some interesting effects. You could do a pull to refresh with a simple fixed 'underlay' that stays put while body is pulled down, thus revealing it.

To answer your question:

A touchmove handler that throws away ( event.preventDefault() ) the event if the following conditions are met should work:

• The event is further up than the last one
• The current target element and body are at scrollTop == 0
• Same for the above two conditions to take care of bottom rubber pull (scrollTop + innerHeigh == scrollHeight)

Please let me know if you're looking for a more detailled axplantion, happy to write it up.

Answer 3

this is a solved problem with preventOverScroll.js

Take a look to www.digitpro.it/Takashi the "Promozioni" and "Altro > Chi Siamo tabs provides an iframe with scroll and without scrolling bounce effect:) feel free to look at the source code JS + CSS