How do I get scrollbars to show in Mobile Safari?

Question

The jQuery time-picker plugin that I wrote uses a div as the containing block for the list of times, and on Mobile Safari there are no scrollbars to indicate that there are more available times than are visible. I know about using two fingers to scroll within the div (on the iPad at least), but that only works if the user knows that there is more content to scroll to, and there's no indication that there is. So, my question: Has anyone been able to get scrollbars to show in Mobile Safari? How'd you do it?

Answer 1

Assuming you are using iOS5.0 or later, I think you have to use the following:

-webkit-overflow-scrolling: auto (this is default style)

auto: One finger scrolling without momentum.

The other available style is

-webkit-overflow-scrolling: touch

touch: Native-style scrolling. Specifying this style has the effect of creating a staking context (like opacity, masks, and transforms).

Using touch mode, the scrollbar will be visible when the user touches and scrolls, but disappear when not in use. If you want to make it always visible, then this old post will help you:

::-webkit-scrollbar {
    -webkit-appearance: none;// you need to tweak this to make it available..
    width: 8px;
}

Another Piece of Code for Thumb by @BJMC:

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

Original Source

Edit: with respect to this demo's behaviour, you should use jQuery because it will help you a lot, $(document).ready(function(){//your code with timer}) code with timer will need to reset the CSS property to normal after desired time(let's say 5 sec.)

For the demo( that you have described), this is initiated with the onhover event, please check this fiddle I have created for that.

That reproduces the results in a desktop browser, and will also work in iPad, just add your timer code to suit your requirements.