How to get the scroll bar with CSS overflow on iOS
Edit following the comment left, kindly, by kritzikratzi:
[Starting] with ios 5beta a new property
-webkit-overflow-scrolling: touchcan be added which should result in the expected behaviour.
Some, but very little, further reading:
Original answer, left for posterity.
Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.
Instead, as you've found, users are required to perform the two-finger swipe in order to scroll the overflow-ed content. The only reference, since I'm unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: Two-fingered scrolling.
The only work-around I can think of for this, is if you could possibly use some JavaScript, and maybe jQTouch, to create your own scroll-bars for overflow elements. Alternatively you could use @media queries to remove the overflow and show the content in full, as an iPhone user this gets my vote, if only for the sheer simplicity. For example:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />The preceding code comes from A List Apart, from the same article linked-to above (I'm not sure why they left of the type="text/css", but I assume there are reasons.
I have done some testing and using CSS3 to redefine the scrollbars works and you get to keep your Overflow:scroll; or Overflow:auto
I ended up with something like this...
::-webkit-scrollbar { width: 15px; height: 15px; border-bottom: 1px solid #eee; border-top: 1px solid #eee;}::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #C3C3C3; border: 2px solid #eee;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); } The only down side which I have not yet been able to figure out is how to interact with the scrollbars on iProducts but you can interact with the content to scroll it