How to get the scroll bar with CSS overflow on iOS

Question

Developing an iPad website I tried to use the CSS property overflow: auto to get the scrollbars if needed in a div, but my device is refusing to show them even if the two fingers scroll is working.

I tried with

overflow: auto; 

and

overflow: scroll; 

and the result is the same.

I'm only testing on an iPad (on desktop browsers works perfectly).

Any ideas?

Answer 1

Edit following the comment left, kindly, by kritzikratzi:

[Starting] with ios 5beta a new property -webkit-overflow-scrolling: touch can be added which should result in the expected behaviour.

Some, but very little, further reading:

• Native momentum scrolling in iOS 5

---

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.

Answer 2

Apply this code in your css

::-webkit-scrollbar{      -webkit-appearance: none;     width: 7px;  }  ::-webkit-scrollbar-thumb {      border-radius: 4px;     background-color: rgba(0,0,0,.5);      -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); }