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

Answer 1

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 2

In CSS (for iOS 5):

-webkit-overflow-scrolling: touch;

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 -->