CODEWITHSUNDEEP
javascriptcsssafariwebkit
conmulligan
conmulligan

Reputation: 7148

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

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.

Upvotes: 15

Views: 15164

Answers (3)

Bramus
Bramus

Reputation: 2059

This does the trick:

body,
html {
  position: fixed;
}

Tested and verified with iOS8, and iOS9.

Upvotes: 0

erkfox
erkfox

Reputation: 23

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

Upvotes: -1

Charles Sprayberry
Charles Sprayberry

Reputation: 7853

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

Upvotes: 13

Related Questions