Menu
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)?
515
Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element.
The most straightforward way for disabling scrolling on websites is to add overflow: hidden on the <body> tag. Depending on the situation, this might do the job well enough.
Scroll bouncing (also sometimes referred to as scroll 'rubber-banding', or 'elastic scrolling') is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a ...
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();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
