Tip: Scrolling DIVs on the iPhone and iPad

Some sites, including some I’ve been involved with, pop up what are called “divs”, which can simulate popup up windows or other areas of independently scrolling areas within a web page. The problem with this approach is that the iPhone’s Safari doesn’t have scrollbars. How does it know if you want to scroll the whole page or just the “div” that you’re pointing at?

Apple’s solution is simple. It assumes that a single finger swipe is aimed at scrolling the whole page while a two-finger swipe scrolls the div. It looks like this same trick will work on the iPad, allowing for sites such as Google Reader to work without modification.

For developers using the iPhone simulator, a two-finger scroll is mimicked by holding down option and shift while clicking and dragging.

5 Replies to “Tip: Scrolling DIVs on the iPhone and iPad”

  1. This same technique works for scrolling in textarea boxes that don't automatically grow as you type in them.

  2. Problem is that there is no affordance to indicate that the Div is scrollable, or that there might be additional material worth scrolling for…

Leave a Reply