how do I make content scroll dynamically in a DIV on Iphone's safari or android's webkit?

Question

my code:

for(var myLine = 0; myLine < 100; myLine++)
      document.getElementById("myDiv").innerHTML += "line " + myLine + "<br>";


...............

<div style="position:...etc; overflow:auto;" id="myDiv"></div>

this works without a glitch in every browser on all non mobile platforms. However... when this is implemented on iPhone (Safari) or Android (webkit) the div gets filled up with the text but no scrollbar is generated when the text runs past the height of the div and the user can't "push" the content down either. So effectively overflow is always "hidden" no matter what.

I'm curious if there's some alternative approach that I'm overlooking or if this is just a bug I have no way to get around at the moment.

Answer 1

This is a known problem on mobile webkit: http://www.quirksmode.org/webkit.html . Look for overflow.

The solution to this is iScroll.

Answer 2

Actually, iOS is behaving correctly. The user must use two fingers to scroll any scroll area on a page that is not the entire page. (otherwise how would the browser know if the user meant to scroll a div or it's container when they both fill the screen on a non-optimzed page.)

The best way to work around the 'feature' is to implement a touch event handler that moves the div up when the user touches it. A great example of this in practice is Apple's FingerTips sample code.

Apple uses this exact technique when you browse the Safari Developer Library on an iPad.