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,

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 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

Answer 3

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.