-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.

Compare scrollbars

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.

Magic and Mighty Mouse

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.

7 thoughts on “-webkit-scrollbar on OS X

  1. Mike

    Hey Mark, just wanted to say that this solved a huge bug for us that we haven’t found a solution to for quite a while.

    Big thanks, mate!

    Reply
  2. Kamas Gratuit

    Thanks for any other wonderful article. The place else may anybody get that kind of information in
    such a perfect method of writing? I have a presentation subsequent week, and I’m at the search for such information.

    Reply
  3. auto body repair shop Birmingham

    Failed or damaged EGR systems must be attended to; however,
    as they can cause significant loss of performance and increased fuel consumption, and can also
    lead to serious engine damage. Jack Barker is the owner and operator of Collision
    on Wheels, a mobile auto body shop in the North Dallas Metro area.

    This will require fixing the hood of the car all the way to the engine.

    Reply
  4. lawyer careers

    Great post. I used to be checking constantly this blog and I am
    inspired! Extremely useful information particularly the closing
    section :) I care for such information much. I used to be looking for
    this certain information for a long time. Thank you
    and good luck.

    Reply

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>