Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Freckle Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

Prevent rubber-band scrolling for single page apps in Safari 5.1

July 29th, 2011

Safari 5.1’s (on Mac OS X Lion) rubber-band scrolling is teh awesome for websites and “classic” web apps like good ol’ Freckle time tracking, but for those newfangled single-page apps (like our upcoming email & twitter support app, Charm) that have their own page layout and aim to look more like desktop apps it can quickly get in the way; that is when you use vertically scrolling sub-elements (like lists) in your app.

Never fear, this little CSS snippet will disable rubber-band scrolling:

html, body {
  height: 100%;
  overflow: hidden;
}

This of course, disables all scrolling of the body element, so you’ll need a wrapper div that is overflow: auto around your respective content (elements with overflow: auto don’t use rubber-band scrolling).

Of note, setting overflow: scroll will make it look like the vertical scrollbar is not going all the way to the bottom. This is because there’s room left for a horizontal scrollbar that’s not needed in most cases—the solution to this is to use overflow-y: scroll or just the overflow: auto on the scrolling content wrapper div.

Related to this, the new -webkit-overflow-scrolling: touch property will enable single-finger rubber-band scrolling of elements within a page, but only on Mobile Safari in the next release of iOS. This property doesn’t change the behavior of scrolling on desktop Safari (yet? I wish it would be supported there too).