Tip: Scrolling DIVs on the iPhone and iPad

February 18th, 2010

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.

View Comments to “Tip: Scrolling DIVs on the iPhone and iPad”

  1. bsloane

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

  2. Kevin Galligan

    You just saved me a solid hour of screwing around with my HTML.

Leave a Reply

For spam filtering purposes, please copy the number 5809 to the field below:

blog comments powered by Disqus