Recent Posts

Archive

Disable Elastic Scrolling in Safari on OSX Lion, iPhone and iPad

Elastic scrolling is something that first reared its head with the iPhone, iPod Touch and iPad. iOS devices have this interesting and novel ability to make web pages in Safari have a feeling of elasticity to them. Generally, I find this effect appealing.

Unfortunately, for those things that might be designed more as web "apps" than as web "content" the elasticity can become frustrating and annoying.

OSX Lion introduces lots of things from the iOS world, including elastic scrolling in web pages.

Disabling the elastic effect has two separate requirements. In desktop Mac OS X Lion, to disable elastic scrolling you need to implement the following CSS rule:

body {
  overflow: hidden;
}

In iOS devices, you need JavaScript instead, something like this will do the trick:

$(document).bind(
  'touchmove',
  function(e) {
    e.preventDefault();
  }
);

If you find jQuery confusing, this is the equivalent regular JavaScript:

document.addEventListener(
  'touchmove',
  function(e) {
    e.preventDefault();
  },
  false
);

Post a Comment: