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

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).