How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

Tags: css,webkit,scrollbar,osx-lion,blink

Problem :

WebKit/Blink's (Safari/Chrome) default behaviour on on Mac OS X since 10.7 (Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.

Example (jsfiddle)

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

WebKit (Chrome) Screenshot

Presto (Opera) Screenshot

---

How can I force a scroll bar to always be displayed on a scrollable element in WebKit?

---

Solution :

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements ^[blog]. You can disable the default appearance and behaviour by setting -webkit-appearance ^[docs] to none.

Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:

Example (jsfiddle)

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

WebKit (Chrome) Screenshot