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

screenshot of a div with no visible scroll bar

Presto (Opera) Screenshot

screenshot of a div with a visible scroll bar


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

screenshot showing webkit's scrollbar, without needing to hover


    CSS Howto..

    How to always center a flexible square in viewport with pure CSS?

    CSS form with side by side fields…how to align the labels and fields vertically?

    How to adjust responsive behaviour of menu bar's elements

    How do I edit an external css file with PHP?

    CSS Layout. Can not get idea how to fix it

    How to create an highlight animation when a control gets focused [closed]

    How to animate multiple elements at the same time?

    How to add css into .scss file or theme

    How to style