A Simple Solution to iOS Scrolling

One of the most common metaphors for iOS applications, and especially iPad applications, is an independently scrolled window pane. In the iPad’s mail application, for example, you can easily scroll the message list and the current message itself independent of one another. This is such a common thing on the iPad that transferring it over to iOS web applications seems like a trivial matter.

Except it’s not. The iPad doesn’t support this feature, likely the most common UI metaphor on the device, in an easy way for Mobile Safari applications. There are some solutions (including Pastry Kit and Sencha Touch), but they all solve the problem a very similar and kludgey way: overwrite the default scrolling behavior with one that uses CSS transformations and JavaScript to move the elements down the window pane. Even Google’s iPad GMail interface, one of the best implementations of this in Mobile Safari, is using this strategy. Implementing this requires a large amount of effort in most cases even with the support of a JavaScript framework behind the scenes.

A simple solution, however, would be to simply change the iPad’s overflow support. In most modern browsers, setting a static height / width for a div element and adding the overflow: scroll; property in CSS will result in an independently scrollable portion of the page should content exceed the height / width boundaries. The iPad does support scrolling in these circumstances, but it requires using two fingers and is often slow and unresponsive. Most Android browsers (including, as of the time of this writing, the Galaxy Tab) don’t support this type of scrolling at all.

Changing the device’s behavior to automatically add the native style tweening, momentum, and scrollbars to these elements would allow UI developers to very easily add intuitive independently scrolling sections to their iPad web applications. Even better, this solution graceful degrades as desktop browsers would automatically add scrollbars to the content making it easy to understand that additional data is available.

UPDATE: Looks like this feature is making its way into iOS 5! http://functionsource.com/post/scrollability-can-hopefully-become-a-shim

Advertisements

About johnnywey

Welcome to A Regular Expression. This blog is designed to reflect my thoughts on life, music, software design, Apple, faith, philosophy, and whatever else I can think of.

Posted on December 3, 2010, in Apple, CSS, Programming. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: