1

I have a div with some inline content that is scrollable.

On Apple OS Yosemite (Chrome and Safari) and iOS iPad/iPhone (Chrome and Safari) this scroll thumb/bar is hidden (until you actually start scrolling the content then it appears).

On Windows Chrome/IE/FF this scroll thumb/bar is always visible.

How do I keep this scroll thumb/bar visible at all time on Apple OS/iOS for Safari and Chrome etc?

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
TF35Lightning
  • 365
  • 3
  • 7
  • 22

3 Answers3

2

In both cases, browsers default to the OS's scroll views - on OS X, that means a scrollbar that disappears, on windows, it means the scroll thumb/bar is always hidden (ever wonder why all scrollable windows look pretty much the same on a given OS?). The only solution, is to NOT use the native scrollable area (overflow:hidden) and replace it with JavaScript (e.g. http://manos.malihu.gr/jquery-custom-content-scroller/) that re-implements it (but allows you to control the look of) the scrolling interface. Keep in mind that doing this presents it's own set of compatibility issues.

Honestly, the (arguably) best thing to do is just to present users with what they are familiar with - on OS X, that's a scrollbar that gets hidden and on Windows, it's an omnipresent scrollbar. Stick to the defaults and you'll never run into UX issues.

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
  • The problem with sticking to the defaults is that OS X hides scrollbars if a user is using the trackpad. Users then have no idea which of your Div's have additional content that can be scrolled to. Ever watch someone use your website, this will confuse them. It is very sad that we now have to implement custom scrollbars because OS X tries to be clever. – Sheepdogsheep Dec 21 '16 at 11:14
  • @Sheepdogsheep - The benefit of sticking with the default is that people know how **their** default acts because they see it everywhere all the time. If you're an OSX user, then you already know that you won't necessarily see a scrollbar on scrollable elements. The absence of a visible scrollbar on a scrollable element to an OSX user is far less likely to confuse them than the absence of a visible scrollbar to a non-OSX user. – Adam Jenkins Dec 21 '16 at 13:05
0

try this 

::-webkit-scrollbar { 
    display: none; 
}

found here

Community
  • 1
  • 1
dcolzani
  • 1
  • Thanks guys, @Adam yeah I would like to keep it with the originals but in my case here on a Apple system a user wouldn't even know the area is scrollable unless I give them some sort of indication, if I can't figure a solution with the javascript etc you provided I'll probably just end up putting the text (scroll below) into the header of the div etc to help indicate – TF35Lightning Mar 29 '15 at 06:57
  • this doesnt actually work in Chrome and Safari on iOS – oldboy Jun 21 '19 at 01:56
0
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

from here

Patrick
  • 13,872
  • 5
  • 35
  • 53