20

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?

Brian Webster
  • 30,033
  • 48
  • 152
  • 225
Daniel Cotter
  • 1,342
  • 2
  • 15
  • 27
  • You might also want to consider a different approach to showing the user that there's more content, like showing something that is cut off, or an arrow... – mb21 Jun 21 '13 at 17:52
  • is this iOS5?? you are talking about – MarmiK Jun 24 '13 at 12:40
  • You need to add `height: 8px;` to the top answer if you want horizontal scrollbars to be shown. – Utku Nov 04 '17 at 13:58

7 Answers7

29

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.

Community
  • 1
  • 1
MarmiK
  • 5,639
  • 6
  • 40
  • 49
  • I'm looking for a way to make it behave like iOS select popups where the scrollbar appears initially and then fades out. So you know it's scrollable but it gets out the way. I guess I could add a class on load to apply the ::-webkit-scrollbar rules and use css transitions to fade it out. – Sam Hasler Jun 24 '13 at 14:11
  • I have `-webkit-overflow-scrolling: touch` on the div and I do not see scrollbars until I start scrolling. – Sam Hasler Jun 25 '13 at 08:16
  • user agent switcher? are you saying you haven't tested this on an actual iPad/iPhone as that is the only way to know how it will behave on iOS. – Sam Hasler Jun 25 '13 at 12:43
  • Have you tried to add this snippet? ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); } – lorddarkangel Jun 25 '13 at 13:03
  • 1
    I've tested the above on an iPad and it doesn't work as required. It's ok to test layout and javascript UA sniffing using UA switching but when it comes to testing **actual browser behaviour** you have to actually test on the target device. Also, Chrome Dev tools has user agents switching built in now. – Sam Hasler Jun 25 '13 at 13:04
  • Yes have you tried to add the above snippet.. Yes, I agree.., for that I have http://emulator.mobilewebsitesubmit.com/ it also have plugin for Chrome that is also good alternate, we can't afford all device and all emulator installed in one PC.. :) – MarmiK Jun 25 '13 at 13:12
  • @lorddarkangel: That won't fade out after page load, which is the behaviour of iOS select popups I'm trying to emulate. It might be part of a solution if I add a css transition to fade out and there may be an issue with it still being faded out when scrolling (I'll have to test it when I have time) but, as is, this doesn't reproduce the behaviour I asked for. – Sam Hasler Jun 25 '13 at 13:28
  • @MarmiK, no, it should be visible initially on page load (so the user knows it's scrollable), and then fade out straight away. It should reappear whenever the user scrolls, and then fade out again. This demo reproduces the behaviour: http://areaaperta.com/nicescroll/demo.html – Sam Hasler Jun 25 '13 at 13:54
  • @MarmiK Can you add `height: 8px;` to the answer as well? Without it, horizontal scrollbars won't be shown. – Utku Nov 04 '17 at 13:59
  • We can modify the style, at the time the question was asked, height was not mandatory, I will edit the answer. – MarmiK Nov 11 '17 at 03:21
7

Regarding the original question: the best solution to have scrollbars would be to use an external library (already recommended iScroll is good, but even jQuery UI itself contains scrollbars). But displaying ever-present scrollbars might deviate from the general iOS UI (see below).

Alternative would be to indicate with other GUI elements that the content is scrollable. Consider small gradient fields in the end of the element (the content fades to background there) that suggest that content continues when touched and scrolled.

In iOS5 overflow: scroll functions as expected, i.e it allows the the div to be scrolled up/down with one finger within the area specified by the dimensions of the div. But scrollable div doesn't have scrollbars. This is a bit different from the general UI in iOS(5). Generally there are no scrollbars also, but they appear when user starts scrolling a content area and fade out again after the touch event has stopped.

Laurel
  • 5,965
  • 14
  • 31
  • 57
hanskan
  • 144
  • 2
  • 6
3

To answer Sam Hasler comment above. Nicescroll 3 is a jquery plugin that does just what you want with fade in/out effect and work in all major Mobile/Tablet/Desktop browsers.

Live demo

Code:

$(document).ready(function() {    
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"});
    $("#divexample1").niceScroll();//or styles/options below
    $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
    $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
  });
MarmiK
  • 5,639
  • 6
  • 40
  • 49
Gomino
  • 12,127
  • 4
  • 40
  • 49
  • 1
    *That* is how to do a compatibility table! – Sam Hasler Jun 25 '13 at 08:19
  • @SamHasler is there a reason why my answer isn't satisfying you, maybe I can help ? – Gomino Jun 26 '13 at 12:35
  • I upvoted this answer as it does solve the problem but it's a plugin that I would then have as a (large 3000+ LOC) dependency, rather than a few lines of css/js that I can understand and manage myself, so I won't be using it. – Sam Hasler Jun 27 '13 at 07:57
2

If you want to have the scroll to be always visible,

Do not set -webkit-overflow-scrolling: touch

then set custom style for scrollbar

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

You loss the momentum effect, but scrollbar will always be there.

(tested under iPhone 4/ iOS 7)

lulalala
  • 17,572
  • 15
  • 110
  • 169
  • 1
    but removing `-webkit-overflow-scrolling: touch` sometimes stops the scroll effect in some case, until i switch the iPhone from portrait -> landscape -> portrait back. then it works. – Amit Shah Feb 17 '17 at 09:55
1

Mobile safari, as far as I have seen won't support scrollbars. The best plugin I could find to get the job done is this.

Its Demos are available here. It also has multiple predefined skins to suit your application.

here's a sample of what you'll get -

enter image description here

Bilal Fazlani
  • 6,727
  • 9
  • 44
  • 90
0

By convention, scrollbars are not used on iOS.

For a div with overflow: scroll, the only native way to scroll is with two fingers.

You might take a look at iScroll, a JavaScript library which handles touch events and implements single-finger momentum scrolling (what users generally expect in native apps) for divs.

Matt
  • 385
  • 1
  • 5
0

until ios5 you could not scroll internal divs - so you probably are not seeing a scroll bar when you try to scroll because there isn't one.

I haven't tested on ios5 but supposedly scrolling internal divs now works.

If it isn't an internal div then you should be able to see the scroll bar when it is scrolling only - this isn't just on ios anymore - lion has gotten rid of all native scroll bars too. You can only see them when a window is scrolling or when the window is first loaded.

HarrisonJackson
  • 370
  • 1
  • 6