15

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.

3 Answers 3

13

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; }
4
  • 1
    Works like a charm; I figured it'd be something simple. Thanks, man. Jan 11, 2012 at 21:29
  • 7
    Doesn't work for me - the page freezes and can't scroll to anywhere. Dec 18, 2014 at 0:46
  • 3
    this doesn't work, just prevents all scrolling for me on safari
    – Ralphonz
    Dec 5, 2016 at 10:03
  • This is theoretically impossible to work, you would just prevent scrolling and that's all. I do not get it, why is this marked as the solution. Oct 18, 2022 at 14:04
0

This does the trick:

body,
html {
  position: fixed;
}

Tested and verified with iOS8, and iOS9.

1
  • Doesn't work while using trackpad on safari
    – TomSawyer
    Aug 31, 2022 at 16:12
-1
html { overflow: hidden;}
body { overflow: scroll;}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.