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;


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

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.

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

  1. Hello webmaster do you need unlimited content for your blog ?
    What if you could copy post from other sites, make it pass copyscape test and
    publish on your website – i know the right tool for you, just search in google:
    kisamtai’s article tool

  2. Very informative article, i’m regular reader of your site.
    I noticed that your website is outranked by many other blogs in google’s search results.
    You deserve to be in top10. I know what can help you, search in google for:
    Omond’s tips outsource the work

Leave a Reply

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