Scroll panes are a challenge for many Mobile Safari app developers. Often you’ll want to have persistent UI on a page that doesn’t scroll when the main content area does, especially on the iPad. However, Mobile Safari requires two-finger scrolling for iframes and
overflow:scroll elements, and doesn’t support
position:fixed. Both these decisions make sense for making existing content browsable using touch, but complicate things for apps that need kind of scrolling.
Luckily, it’s possible to implement high-performance touch scrolling with fixed elements using the hardware-accelerated animations available on the iPhone and iPad. Even more luckily, people are working on this problem so you don’t have to, and have released their work under MIT-style licenses.
The most commonly used scrolling library for Mobile Safari has been Matteo Spinelli’s iScroll library. iScroll is now at version 3, and supports most of what you’d want from an iPhone scrolling library. The look and feel are pretty close, but are not an exact reproduction of native scrolling. For example, version 3 removed the effect where scrollbars shrink when you scroll past the end of the region. Further, support for non-Apple devices is intermittent, which causes concerns for people using PhoneGap to make cross-platform apps. For these reasons, a lot of developers I’ve talked to aren’t satisfied with it.
This week David Aurelio released TouchScroll, a competing library. It’s more code than iScroll, but seeks to be more featureful and high-fidelity. It automatically updates to compensate for its content changing, and is also scrollable on desktop browsers simply by setting
overflow:scroll. It’s written with PhoneGap developers in mind, including first-class Android support. It’s currently buggier than iScroll, but given its current buzz, its fork-friendly GitHub page, and the PhoneGap focus I can see TouchScroll becoming the dominant library in the medium term.
In the meantime, various frameworks have been implementing their own touch scrolling. Earlier this month at JSConf, the SproutCore guys announced and demoed their own touch scrolling support. While they don’t have native-style scrollbars yet, their performance is very good. For large apps, the performance benefits of their incremental rendering technology is a big win: only elements that are visible are rendered in the DOM. Other frameworks are working on solutions, for example the jqTouch plugin for jQuery has a plugin of its own based on iScroll. In the long term I see most frameworks including touch scrolling as part of the package.