Richard York

Web Developer, Author, and Artist

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

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

August 4, 2011 by Richard

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

Comments

  • August 24, 2011 Josh says:

    Thank you very much for this... been looking all over for a way to disable this in Safari 5.1 (on Mac OS X 10.7.1) and this is the first encouraging news I have come across. So how is the best way to implement this CSS rule on every web page we visit? An extension like NinjaKit, or maybe QuickStyle? http://canisbos.com/quickstyle http://steeev.freehostia.com/wp/2010/07/19/new-extension-for-safari-5-called-ninjakit-lets-you-install-gm-scripts/ Thanks for any feedback...
  • September 4, 2011 Ralf says:

    I have no idea how to "implement" the style in quick style Or NinjaKit ... btw i am Not a programmer or web designer ... and both (quick style and NinjaKit are not having a documentation for NON programmers...
  • October 4, 2011 Chad Johnson says:

    I am not sure where I can enter the code.
  • November 7, 2011 Anthony says:

    You can apply CSS rules to all pages in Chrome using the Personalized Web plugin. Under match URL you put ^http[s]*://.* Unfortunately, the overflow:hidden; rule didn't work on most websites and made some unable to scroll at all, like Facebook.
  • November 7, 2011 Richard York says:

    @Anthony, This is not intended to be a solution for disabling elastic scrolling on all web sites and the idea that someone might use it that way never crossed my mind. The CSS I present is one piece that you would use to disable this behavior on a site that you control. If you use the overflow: hidden hack on the <body> element, to get back normal scrolling behavior, you'll have to position a <div> absolutely inside of the <body> element to get scrolling back with overflow auto. And, there's more to it than that even. But for my purposes, where a web-based application takes up the entire browser window and scrolling is irrelevant, this is useful.
  • December 30, 2011 Andy says:

    This is an effective solution to elastic scrolling but it does have some hampering effects especially if your page is longer than the normal screen resolution. Or if like my page it links to another page when you are using a homescreen. The links will open in safari rather than the existing page. And you will be unable to effectively scroll down the page. Nice work though. Still looking for a solution to elastic scrolling that still lets me scroll down to the end of my document.
  • December 31, 2011 Richard York says:

    @Andy: Like I said before (in comments on this very post), if scrolling is a factor, to get around that, you have to get creative with the CSS. You must put the entire contents of your page inside of a <div> container.
    <body> <div> All content goes here. </div> </body>
    Then you take the <div> container and you apply the following CSS to it:
    html, body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; } div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; }
    Now it will scroll again.
  • January 6, 2012 Andy says:

    @Richard Hehe typically I seem to have skim read over that part. I did figure this out however and it works very well. Thanks again ;)
  • January 6, 2012 Andy says:

    Actually this works perefctly in the browser but when I use it on my iPhone it still wont scroll. Cant figure out why. Seems to be the touch event if I remove that the div scrolls. But then I get the elastic scrolling back. Simplified but hopefully makes sense.
  • January 6, 2012 Andy says:

    Actually this works in a normal browser, but as soon as I move to my iPhone the touch event still blocks the scrolling on the div. What am I missing?

There are no comments posted at this time.

Leave a Comment

Simple HTML is allowed: <code>, <b>, <i>, <u>, <var>, <strong>, <em>, <blockquote>, <ul>, <ol>, <li>, <p> (no attributes). All spacing and line breaks in your comment will be preserved.

* All comments are moderated and are subject to approval.
Your comment will appear once it has been approved.
Posting multiple times will not expedite the approval process.

Archive

© Copyright 2014 Hot Toddy, All Rights Reserved.