another solution -- nested divs with overflow:touch #2
Description
I stumbled upon a way to use native scroll, but sidestep the document-bounce behavior. I tested it with an iPad 1, using IOS 5.1.
If you build internal scrolling divs and you can declare explicit height/width for them, you can achieve this without javascript.
This approach uses a set of 3 nested divs. The innermost div is tall enough to kick in the scrolling behavior, the middle div is smaller than the outermost div, and I guess the outermost kills the propagation by evaluating for touch-scroll and coming back with "nothing to do" Or, I think that's what's happening.
OuterDiv -- fixed height, width, overflow-scrolling: touch;
MiddleDiv -- fixed height width, overflow-scrolling: touch; fits inside OuterDiv
InnerDiv -- fixed height width, bigger than MiddleDiv, so it kicks in the overflow behavior
Here's an example:
https://gist.github.com/1372229
This example does the triple-nested trick twice. The inner 3-wrapper-set uses no javascript (height and width are explicit CSS declarations). The outside 3-wrapper-set uses javascript to fetch the document height, so that it can be full-window-size. This approach allows native internal scrolls AND reaps the benefits of killing page-bounce for the overall document.
Before IOS 5 native internal scroll, the usual method to kill the page-bounce was....
document.body.addEventListener('touchmove', function(e) {
// This prevents native scrolling from happening.
e.preventDefault();
}, false);
And then you would have to build your own drag behavior.
I dunno how robust this hack is, I fear an upgrade to Safari might... "fix" this. But at the moment, it seems like you get the desired effect (internal scroll, no document bounce) almost for free.