Native-like momentum-scrolling on BODY in iOS webapp

Question

According to this article http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ one should be able to enable native-like momentum-scrolling like this:

body{
        -webkit-overflow-scrolling: touch;
    }

However, this doesn't change anything in my webapp. It scrolls the same with or without that property. I expected to have a longer momentum like native apps do.

I tested it on a scrollable DIV, which works - but I don't want to add any unnecessary markup just for this.

Any tips?

Further info

Ok, it "kind-of" works like this:

html, body {
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    position:relative;
}

however, anything with position:fixed inside the BODY-tag moves while scrolling and re-attaches to it's correct position when scrolling stops. Is there something I can do to fix this?

Anyone having any input on this?

Fiddle: http://jsfiddle.net/nMxEg/1/

Answer 1

Use a Div with a set height, and perform the scroll with touchscroll on the div. The header and footer can remain as fixed divs at an the same level in the DOM.

<div id="fixedheader"></div>