Question

I am creating a full screen web app which will have some modules/widgets which make use of the new iOS 5 overflow:scroll features.
What I want is to disable that ‘bouncy’ effect when scrolling the html/body (since it is full screen) but keep that effect only on the scrollable elements.

to smooth the effects of scrollable elements I have:

html, body { overflow: hidden; }

.scrollable {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

and then the following script which disables the touch scroll effect:

$(document).bind('touchmove', function (e) { 
    if (e.target === document.documentElement) {
        e.preventDefault(); 
    }
});

although this doesn’t seem to work at all, because when scrolling an element to very bottom end or top it also scrolls the documentElement.

Is there any way to only disable that effect for the body html element?

Here it is a good example of how this affects the functionality:

http://dl.dropbox.com/u/1928164/ios5/index.html

Answer 1

It turns out for me that the only effective solution was to use joelambert/ScrollFix script, worked really well with no lags, In fact I am already using it in one of my projects.

You can also check about it in more details on his blog post.
Sorry for the other users who replied but I really didn’t get those answers to work for me.