-webkit-scrollbar on OS X

In a recent project I noticed something peculiar happening to scrollbars in webkit browsers on the Mac and decided to investigate. Here is a problem and the solution.

I was having an issue where a <div> had it’s overflow set to scroll. It was a twitter feed that we wanted to cut short visually but when we implemented it, we noticed on my machine the scrollbar wasn’t visible while on my colleagues, it was. Same machine, same software, same settings. Note the image on the right, you’d have no idea content had been hidden. OS X briefly flashes a scrollbar on the page but you’re unlikely to see it.

We thought it was a browser bug. Same Chrome version. The actual difference between the scrollbars showing on his machine was actually the mice we were using. He was using an Apple Mighty Mouse while I was using their Magic Mouse. That was the ultimate difference between seeing a scrollbar or not. This can be changed in the Apple Settings.app by changing the “Show scrollbars” setting under General. A bit stupid.

The problem

You might not think this is a large problem but for usability I can see this being pretty important. In a large browser window we’re so used to seeing scrollbars I can understand Apple’s decision to hide them. They just get in the way but for scrollable content within the page they’re a must have.

The screenshots above actually have a bit of content you can’t see. Have a look at this demo of some content hidden in a scrollable div (middle paragraph). Would you have ever known that content was there?

The solution

The solution is to use -webkit-scrollbar in your CSS to bring them back. You actually get complete control of how they look on the page. I wrote some CSS to implement a Mac style scrollbar which displays regardless of your settings:

::-webkit-scrollbar {
    width:9px;
}

::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.05);
}

So there you have it. Usable scrollbars and content which isn’t hidden to the user. Usability bliss. See the updated example on jsbin and the example is actually on this here blog.

It even works on iOS which is even more handy, as scrollable elements on a phone are notoriously difficult to work out.