Display scrollbars in Webkit browsers (Chrome, Safari…) on Mac OS X

Starting with Mac OS X 10.7 “Lion” (and continuing with 10.8 “Mountain Lion”), browsers based on Webkit often do not display scrollbars on elements such as divs that are overflowing. This is a “feature”, and there is a way to disable it.

The quick answer:
Use the psudo element -webkit-scrollbar  and set -webkit-appearance: none;

Sample:

<div class="example">
 Content<br />
 Goes<br />
 Here
 </div>
.example::-webkit-scrollbar {
 -webkit-appearance: none;
 }

Background:
I’ll try to walk the fine line between theorizing what Apple is thinking and what they have done. On Macs that don’t have a normal mouse (eg one with a scroll wheel), you won’t see scrollbars by default. Plug a mouse in, and instantly you’ll see your windows adapt and show scrollbars. Unplug it, and they go away.

Scroll bars will display when you scroll using, for example, the trackpad on a laptop. Essentially devices that “scroll” get scroll bars. And devices that provide more of a “swipe” don’t get scroll bars.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>