Menu
Safari 5 on OS X Lion allows you to scroll past the visible bounds of the page, revealing a linen texture beneath it. It's a nice effect, but for some web apps – particularly those with fixed-position elements like a sidebar – it can be distracting. Does anyone know how to disable the effect using CSS or JavaScript? It must be possible, because some sites like Apple's own iCloud have done so.
310
Simply apply overscroll-behavior-y: none; on html, body and be done with it.
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y .
You can do this with a single CSS rule! To stop the scroll at the end of an element, set on the element's CSS: overscroll-behavior: contain; This way, if the user reaches the end of the scroll of an element, it will stop there and not “scroll-chain” to the body or parent element.
To make this work we need iOS to think that there is nothing to scroll. But how do we do this? We set the height of both the html and the body element to the window height and then set overflow on these elements to hidden so the content gets cut off.
There is a blog post that talks about what you need to do to disable elastic scrolling on both Mac OS X and iOS devices. According to the site it appears to be as simple as the following CSS rule for desktop browsers:
body { overflow: hidden; }
This does the trick:
body,
html {
position: fixed;
}
Tested and verified with iOS8, and iOS9.
27
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
