Menu
According to a new code change being added to Chromium, Chrome for Android is set to gain the elastic scrolling effect. Android 12 and higher have a new visual behavior for overscroll which stretches the scrolling content. This patch uses the elastic overscroll flag to enable this behavior on Android.
The scroll bounce effect, which is also known as 'elastic scrolling', basically refers to a bounce whereby empty space can be seen for a moment when you scroll to the very top or bottom of the page.
You can achieve this more universally by applying the following CSS:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
This allows your content, whatever it is, to become scrollable within body, but be aware that the scrolling context where scroll event is fired is now document.body, not window.
If you use the overflow:hidden hack on the <body> element, to get back normal scrolling behavior, you can position a <div> absolutely inside of the element to get scrolling back with overflow:auto. I think this is the best option, and it's quite easy to implement using only css!
Or, you can try with jQuery:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
Same in javasrcipt:
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);
Last option, check ipad safari: disable scrolling, and bounce effect?
I had solved it on iPad. Try, if it works also on OSX.
body, html { position: fixed; }
Works only if you have content smaller then screen or you are using some layout framework (Angular Material in my case).
In Angular Material it is great, that you will disable over-scroll effect of whole page, but inner sections <md-content> can be still scrollable.
overflow:hidden;-webkit-overflow-scrolling:touch won't work well on iOS safari 8.1, as the fixed header will be out of visible area.
As @Yisela says, the css should be placed on .container(the <div> below <body>). which seems no problem(at leas on safari iOS 8.1)
I've place the demo on my blog: http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
I made an extension to disable it on all sites. In doing so I used three techniques: pure CSS, pure JS and hybrid.
The CSS version is similar to the above solutions. The JS one goes a bit like this:
var scroll = function(e) {
// compute state
if (stopScrollX || stopScrollY) {
e.preventDefault(); // this one is the key
e.stopPropagation();
window.scroll(scrollToX, scrollToY);
}
}
document.addEventListener('mousewheel', scroll, false);
The CSS one works when one is using position: fixed elements and let the browser do the scrolling. The JS one is needed when some other JS depends on window (e.g events), which would get blocked by the previous CSS (since it makes the body scroll instead of the window), and works by stopping event propagation at the edges, but needs to synthesize the scrolling of the non-edge component; the downside is that it prevents some types of scrolling to happen (those do work with the CSS one). The hybrid one tries to take a mixed approach by selectively disabling directional overflow (CSS) when scrolling reaches an edge (JS), and in theory could work in both cases, but doesn't quite currently as it has some leeway at the limit.
So depending on the implementations of one's website, one needs to either take one approach or the other.
See here if one wants more details: https://github.com/lloeki/unelastic
None of the 'overflow' solutions worked for me. I'm coding a parallax effect with JavaScript using jQuery. In Chrome and Safari on OSX the elastic/rubber-band effect was messing up my scroll numbers, since it actually scrolls past the document's height and updates the window variables with out-of-boundary numbers. What I had to do was check if the scrolled amount was larger than the actual document's height, like so:
$(window).scroll(
function() {
if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
updateScroll(); // my own function to do my parallaxing stuff
}
);
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