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 align the navigation menu in wordpress?

    How to prevent links from wrapping in CSS megamenu div (inheritance issue)

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How to resize a div container to fit overflow from a child div

    How to write variable with multiple css properties in Sass

    How to combine multiple css framework with overpalling classes

    How to control a

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    How can I change the inline style text color of an element without the ability to add a class or id?

    CSS: How to produce rounded boxed list

    CSS: how to move element from one column to another one without changing the html?

    How to make background-image size height always equal what the image height needs to be for full width image?

    how to use font awesome in own css?

    How do I change the a border-color on rollover?

    In CSS, how to grow the button + button image when the button is focused?

    How to alter hover effects for image button and embedded text?

    css: how to center box div element directly in center?

    How to make the submenu to be at the same horizontal as its parent's menu with this css?

    How to select a great grandchild of an element by its id

    How to make a new class

    How to programmatically check CSS styles for particular elements? [duplicate]

    How to set my span text vertical align and next to my image?

    How to use css styling in html with multiple directories?

    How to use ASP.NET DropDownList in Bootstrap navbar

    How to override CSS style for a specific element if its parent has a specific class

    Limit number of lines shown in a textbox, but not limiting the user to write

    How to place the block on the top of “second” screen using CSS?

    How to sprite body background in CSS

    Timeline divs not showing in Safari 5

    How to include image into css file using JSF tag