Disable Safari 5's “overscroll” behaviour using CSS or JavaScript

Question

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.

Solution 1

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

Solution 2

This does the trick:

body,
html {
  position: fixed;
}

Tested and verified with iOS8, and iOS9.

Comments

[conmulligan]

Works like a charm; I figured it'd be something simple. Thanks, man.

[Changbai Li]

Doesn't work for me - the page freezes and can't scroll to anywhere.

[Ralphonz]

this doesn't work, just prevents all scrolling for me on safari