Single finger Scrolling for inner contents (div/iframes) in iPhone Mobile Safari

Question

Sub: iPhone mobile safari web application

I need to keep some parts of a web page visible even when a user scrolls. The CSS property position:fixed does not work as expected. Using the overflow:auto property on or needs two-finger scrolling which is not what I want.

Is there any way to provide single finger scrolling on the inner 'div' or 'iframes' contents using javascript or iphone safari Touch API (touchMove event)?

Answer 1

In CSS (for iOS 5):

-webkit-overflow-scrolling: touch;

Answer 2

Natively it is not possible, either with a div or iframe, so it must be solved with javascript listening for the touch events. I'm researching this same problem for a project and at the moment I have found a couple javascript libraries that are solving this problem.

I'm looking into this one at the moment, but I haven't commited to it yet.

http://cubiq.org/iscroll-4

Joe Hewitt of Three20 fame has recently started dev on solution for this as well, but he's really early in dev process where as the other one has been around for a couple years now.

http://joehewitt.github.com/scrollability/

Answer 3

You can use just One finger, but you have to provide style.height of the inner DIV

<div id="container-div" style="overflow:hidden">
   <div id="inner-div" style="overflow-y:auto; height:1024px"> 
   <!-- IMPORTANT!! you must specify the height of the inner div to make it scrollable -->