iPhone Web App - Stop body bounce/scrolling in iOS8

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