IOS Browser Bounce, How To Disable It!

Have you developed any web apps for IOS yet? If you have then you will know how frustrating the IOS browser is when scrolling. With this code snippet I’ll show you how to disable it.

In Blog, Mobile Development

Disable Browser Bounce In IOS Browser

When your browser in the iPad or iPhone browser you will notice when you reach the top or bottom of the page you get what i call the browser bounce. This is when the page finishes but the browser carry’s on and bounces back down. In a recent iPad web App i have been developing i found it pretty annoying, i want the web App to feel like a web App and not like your in the browser. With this little code snippet you can disable it.

Disabling Browser Bounce

Simply stick the code snippet within the head of your document and your done. No more bouncy window.

1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).bind(
  'touchmove',
  function(e) {
    e.preventDefault();
  }
);
</script>

Conclusion

Thanks for taking part in this article, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

  1. June 27, 2012 at 6:29 PM

    Great mate thanks just used this on one of my sites :)

  2. June 28, 2012 at 5:17 AM

    nice article, man
    thanks

  3. July 5, 2012 at 8:21 AM

    Thanks for sharing this code, it is going to be a great help to me in the future when I am developing a mobile website. I was wondering whether it is possible to use this and then have a scrollable div? I was thinking of maybe using this on a website where I have got a fixed navigation menu at the bottom but with all the content above it, which you would be able to scroll to see it all?

  4. Wilma Hamlin
    July 5, 2012 at 5:28 PM

    If you want to make a div scrollable try these two websites. http://www.jqtouch.com/ , http://cubiq.org/iscroll

    Thanks for your comments :)

  5. October 10, 2012 at 3:46 AM

    Yes this disables the bounce effect, but it also disables the *scroll* effect too…

  6. Wilma Hamlin
    October 10, 2012 at 5:43 PM

    yes derek unfortunetly it does…. come to think of it i should of maybe mentioned that in the article

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 6 Comments On IOS Browser Bounce, How To Disable It!, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php