How To: Android Scrollable Divs

Lately I've been working on a webapp for the Motorola Droid and a QNX CAR device. The application interface is a split screen with one half being a list of items of variable length. Neither of these browsers on these devices support iframes or scrollable divs, so the approach used in a traditional browser was not an option.

The application was using jQuery, so using the jQuery UI Draggable plugin was a natural choice. It was quick and easy to implement and worked well on the QNX device, but didn't work at all on the Android browser.

To get the prototype version of the application finished on time for the deadline, I resorted to adding up/down buttons to the interface that scrolled the div content by manipulating the margin-top via javascript. This satisfied the client, but as a solution it was less than optimal, and in my opinion it made the UI feel clunky.

At the time that I write this, there's not a lot of information about how to deal with this issue in the Android browser. It took me a while to discover that this issue is also a problem for the iPhone/iPod Touch browser and since Android's browser also uses WebKit, there is already a working solution called iScroll developed by Matteo Spinelli on Cubiq.org.

This code utilises WebKit's "touch" events, which are akin to click events, but are only fired by touch screens. You can find a great introduction to Javascript Touch Events on Michael's "Back To The Code" blog. If you're new to developing mobile webapps, you should probably also take a look at iPhone Webapps 101.

Hopefully posting these bits and pieces together here will help save somebody a lot of time searching on Google.