Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touch interactions when a scrolling section is bouncing/rubber banding. I don’t think this issue can be worked around (but would love to be proved wrong!). As such, I don’t advise the use of
overflow: scroll for web apps until Apple provide a fix, I’d recommend continuing to use iScroll or Scrollability in the meantime!
One of the things I was most looking forward to in iOS5 was the added support for
overflow: scroll and the associated
After a bit of use, there is at least one issue with the implementation that makes it difficult to use for full screen web apps. Fortunately there is a work around.
The newly supported
overflow:scroll is a great addition to Mobile Safari’s arsenal and works well except under the following conditions:
- The scroll area is at the top and the user tries to scroll up
- The scroll area is at the bottom and the user tries to scroll down.
In a native app, you’d expect the content to rubber band but in Safari the whole page is scrolled instead.
Enter ScrollFix.js, a small script that works around this problem.
ScrollFix works around this by manually offsetting the
scrollTop value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree.
To better demonstrate the problem (and solution) here are a couple of videos:
iOS5 overflow scrolling without ScrollFix.js
iOS5 overflow scrolling with ScrollFix.js
ScrollFix is a work in progress (there are still bugs!) and can be downloaded for free from GitHub. Please contribute code fixes or open tickets for discussion.