css - iPhone Web App - Stop body scrolling

Question

I am creating an iPhone Web Application and you are now, since iOS5, able to use position: fixed; for headers etc. etc.

Although it works, if you scroll up at the top of a page, it displays the usual gray area for a while before you can't scroll anymore

Is there a way to stop this scrolling? I've tried things like overflow: hidden; but I can't seem to find anything.

P.S. I only want the one thing to stop scrolling, I have a div named #container which I still want to have the ability to scroll.

Answer 1

After reviewing several solutions, I began to create a custom solution:

bouncefix.js

http://jaridmargolin.github.io/bouncefix.js/

Usage:

bouncefix.add(el)

Apply fix so that the given element no longer causes a full body elastic bounce when scrolling at its extremes.

bouncefix.remove(el)

Remove all listeners/observers responsible for fixing the full body elastic bounce.

Why?

Scrollfix was a good start, however I noticed several problems:

1. It only worked when there was scrollable content. If you had an empty page, the bounce effect on the body would occur.
2. The API did not expose a method to remove the listeners. My app will have multiple pages, and it didn't feel right to keep all of the listeners attached as the user moved around the app.

How?

It uses a similar approach to that of scrollfix. The problem occurs when you are at one of the scrolling extremes. On touchstart, we look to see if we are at the top extreme or bottom extreme, adding 1px if we are at the top, and removing 1px if we are at the bottom.

Unfortunately, this trick only works if we are able to set the scrollTop value. If the content is not yet scrollable, for example, you only have 1 list item, the whole body will again scroll. Bouncefix.js will take care of all of this behind the scenes by using event delegation and checking the scrollHeight against the offsetHeight anytime touchstart is triggered. In the case that there is no scrollable content, all scrolling on the container is blocked with e.preventDefault();