joelambert/ScrollFix — Issue #2: another solution -- nested divs with overflow:touch
Author: mattsahr
Created: 2011-11-17 03:24:21+00:00
State: open

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:
git://gist.github.com/1372229.git

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.