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.

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.

• javascript
• css
• safari
• webkit

3 Answers 3

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.

html { overflow: hidden;}
body { overflow: scroll;}