Scroll bar not visible in Safari w/ overflow-y: scroll

Question

When having a fixed element that has overflow: auto or scroll contained in a body element that has overflow: hidden, in Safari 8.0.x the scroll bar is not visible, but the element still scrolls. In Firefox 41.0.x the scroll bar is visible.

Here is a fiddle that shows the behavior.

Is there any way to keep the scroll bar visible in Safari?

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.sidebar {
    position: fixed;
    max-height: 100vh;
    min-height: 100vh;
    background: lightblue;
    width: 200px;
    top: 0;
    right: 0;
    padding: 20px;
    overflow-y: scroll;
}

.content-a {
    background: yellow;
    height: 900px;
}

.main {
    background: grey;
    min-height: 100vh;
    padding: 10px;
}

.content-b {
    height: 200px;
}

body, .main {
    overflow: hidden;
}

<div class="sidebar">
    <div class="content-a">
        content
    </div>
    bottom
</div>
<div class="main">
    <div class="content-b">
        content
    </div>
    bottom
</div>

See http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-os-x-trackpad-users-in-webki — Radio, Oct 22 '15 at 18:43
I tried your code in my Safari 8.0.8 (OSX Yosemite) and it's perfectly working. — Moïze, Oct 22 '15 at 18:52
Yes @Quoid, I have it on the right, allowing me to scroll the yellow sidebar — Moïze, Oct 22 '15 at 19:06

score 2 · Accepted Answer · edited Nov 20 '21 at 15:51

2

Try to stylize it and force it show:

::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    border-radius: 8px;
    -webkit-border-radius: 8px;
}
 
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

WORKING EDIT:

.sidebar::-webkit-scrollbar {
    display: inherit;
}

.sidebar:hover::-webkit-scrollbar {
    width: 10px;
}

.sidebar:hover::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

.sidebar:hover::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

edited Nov 20 '21 at 15:51

Iulian Onofrei

9,188
10
67
113

answered Oct 22 '15 at 19:31

Moïze

707
8
16

this is similar to what [Radio](http://stackoverflow.com/users/3311552/radio) [posted above](http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-os-x-trackpad-users-in-webki), except it's scoped to the whole doc rather than the `element` (which would probably be better), but what I *don't* like is that it doesn't auto hide the scrollbar like the default browser behavior – justinw Oct 22 '15 at 19:53
that's odd, that is default safari behavior, perhaps that is also why you can see the scrollbar – justinw Oct 22 '15 at 19:59

Scroll bar not visible in Safari w/ overflow-y: scroll

1 Answers1