Grow your CSS skills. Land your dream job.

Custom Scrollbars in WebKit

Published by Chris Coyier

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE dropped that.

These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged it in early 2009 and put together an example page of just about every combination of scrollbar possibilities you could ever want.

The Goods

The Different Pieces

These are the pseudo elements themselves. The actual parts of the scrollbars.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

The Different States

These are the pseudo class selectors. They allow for more specific selection of the parts, like when the scrollbar is in different states.

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

I'm going to steal this whole section from David's blog post on the WebKit blog because it explains each part well:

:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.

:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.

:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.

:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.

:double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.

:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

:corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.

:window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

All together now

These pseudo elements and pseudo class selectors work together. Here are some random examples:

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}

Very Simple Example

To make a really simple custom scrollbar we could do this:

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

In which we'd get this on a simple div with vertically overflowing text:

In The Wild

Check out the very subtle and nice scrollbars on Tim Van Damme's blog Maxvoltar (Update September 2012: Tim's site no longer uses this design):

The particularly nice bit here is that the scrollbar is on the body element, yet the scrollbar isn't stuck to the top, bottom, or right edge of the browser window as scroll bars normally are. I made a test page with copy-and-pasteable code to achieve that a similar effect:

View Demo

On Forrst, they use custom scollbars on code snippets which are also pretty nice. They are less visually intense and so don't fight as much with the code highlighting.

Related

Comments

  1. Nice, but style.css … 404 ;)

  2. lossendae

    Max Voltar websites works in Chrome.
    That is not the case for your example.

  3. Mark

    What if I wanted to show custom scroll bars on non-webkit browsers?

    • You’d either:

      1) Not. Or,
      2) Google up some JavaScript based solution.

    • If your truly desperate Flash or JavaScript (somehow, but not any way that I know of).

    • I can’t replicate in Chrome 11 or Safari 5 mac.

    • I have used the plugin at the link below before, it works fairly well. Its not the method Chris uses above, but its a decent JS based plugin.

      http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

      Sul

    • Anthony

      Yet another timely article Chris!

      The point about this not working in other non-webkit browsers is sadly true – I’ve recently spent quite a while trying to figure out a solution to this specifically for use within text areas.

      There are a few javascript/jquery solutions out there and probably one of the best I’ve found was JScrollPane.

      As for text area solutions I’m afraid I didn’t unearth too much but I’m determined to try and figure something out for that too!

      Great post Chris, thanks a lot!

    • Rumor has it, OS X Lion coming out this year is supposed to get rid of the shiny liquid blue scroll bars in OS X anyway. They’re apparently adopting a flat, gray, iOS feel. Like you said, the blue “thumbs” really shout for attention. That’ll be a welcome improvement.

  4. Chris

    Your demo is broken in both Chrome and Safari OSX.

  5. any hint on a possibility that this will become available on other browsers? even on IE i hope :)

  6. Pity this type of overflow doesn’t work on iOS… any idea on how to enable touch events?

    • Matthias

      I’ve had the same problem, but figured out that @media querys can help.

      @only screen and (max-device-width:480px){

      //Insert your Scrollbar-CSS her //

      }

      Works for me.

    • Matthias

      Please delete that last comment. Must have been on crack or something

      Or Chrome used a cached version.

  7. Nima Alchemist

    Hi Chris, thanks for this, I really loved it and tried it in my project right away!

    I hope -moz- comes after this soon, it can make the design more unique, I’d always wanted this and I saw a few flash scrolbars that was awesome in look but creepy in format, ha! but CSS3 is very exciting… and I would love to use it.

    A couple of things I would like to point out…

    As we know it doesn’t work properly until you put position: absolute; in the body section. If we do the right: 20px; it will look fine only for -webkit- browsers! If you see this in Mozilla for example, it will look non-standard and a bit confusing to the user… So I set the right: 0; to level things out. (If you know a better way please let me know, I like to have it 20px to the left)

    Another thing is about the .body again, we better set top and bottom 0 in order to have the page full in height and replace it with margin in the:
    ::-webkit-scrollbar-track { margin: 20px 0; }

  8. Frank Mawn

    Is it me or you can’t use the mouse wheel in your example?

  9. How about fixing broken features in webkit rather than introducing new ones!
    i.e. the fact that the cursor style on an area tag is never honored in webkit..

    sheess….

    • Is this broken? I haven’t seen any problems yet. I haven’t tried to do a ton of advanced stuff though. I’d think the most broken part is that isn’t a little unclear and undocumented about what properties the different parts will accept.

      Regarding the area bug, I hadn’t heard of that, but does sound buggy. Best thing to do of course, is to create a reduced test case and submit as a bug (http://www.webkit.org/quality/reporting.html) If it’s already been reported, submitting your test case will still be helpful in that it’s all the more material to test and registers more interest in the problem.

  10. Don’t forget Opera that can do some tweaks to scrollbars since many years as well. I used it on my website, 6 years ago.

    scrollbar-face-color:
    scrollbar-highligh-color:
    scrollbar-shadow-color:
    scrollbar-3dlight-color:
    scrollbar-arrow-color:
    scrollbar-track-color:
    scrollbar-darkshadow-color:

    Not as good as the implementation of Webkit but then, if you want to play with it.

  11. Is it possible to place an image on the scroll bar?

  12. I’ve used Malihu’s jquery plugin on this website http://bitteart.dk/ to horizontally scroll a client’s gallery. It works pretty well in all modern browsers (I didn’t check in old browsers).

    Plugin page: http://manos.malihu.gr/jquery-custom-content-scroller

  13. I have made this safari extention a long time ago that allows iOS like scroll bars on all sites you visit, it uses the same concept of the webkit, check it out http://db.tt/9T0JtFD

  14. This is very old method…

    Here is the new one and also customize your own scrollbars…

    http://www.hesido.com/web.php?page=customscrollbar

  15. wow nice tuts never tought it easy as find here .. :)

  16. Mats

    Wth is wrong with this website? All text is unreadable in all my browsers. Please use a proper font, or at least fallback to something readable.

  17. Paul

    Hi, may i say something : there are usually some really good stuff with css3 but it’s usually the same : only webkit or ‘only’ mozilla, like text-transform or the scrollbar custom here. So, what do we’re supposed to do with it, wait for 2 years that the concept arrives in every browser…? thanks for the tip anyway, good stuff…for webkit browsers

  18. Ones again you amaze me with your findings and tutorials.. thanks for a great website Chris

  19. Webkit scrollers was a part of my personal blog since mid-2010 (I removed it few time back). Nice article Chris.

  20. Greg

    Can’t get it to work on FF4, the example doesn’t work either

  21. Thanks for the mention, Chris! If only every browser supported this stuff. In time, I suppose.

    Kyle

  22. Tony

    Oh god no. This could be the worst thing in webkit! Scrollbars are the same in every app… if you changed the look of them the average person wouldn’t have a clue what they were.

    Could be terrible for usability.

    • Do you have any research on that?

      I know what you mean. Standard looks are familiar to users, they’ve used them before, so they know how to use them again.

      But these customizations aren’t totally reinventing the concept of a scroll bar. They still basically look like scrollbars if you do it right. I’d wager most users scroll with a mouse motion of some kind, in which case they’d see this custom scrollbar scroll and get it right away.

      But now that’s just me speculating.

    • Tony

      Yeah, was speculating too. The only thing I was going on was that changing user expectations has always proved to be a bad thing (only read that from nielsen’s papers).

      Thing about a scroll wheel is that it scrolls depending on where your cursor is. If you don’t know that something has scrollable content a non-techy user could easily get annoyed at their mouse/trackpad.

      What do you reckon?

    • Tony

      Also, sorry mate, I didn’t mean to sound rude! It looks like a really cool trick for what it does, thanks for sharing!

  23. Alex

    I love the custom scrollbars but is there a way to resolve how the browser window must be clicked before the keyboard up/down arrays scroll the page? That is kind of a deal breaker.

  24. I think these are really cool, especially the usage on Forrst on code examples, which to me look pretty ugly with Apple aqua scrollbars or something like that.

  25. I have to agree with most of the commenters over at HN (http://news.ycombinator.com/item?id=2513578) that styling scroll bars is usually a bad idea.

    As “stuk” said over there: “The problem with allowing the customisation of scrollbars is that most people are going to make them worse.”

    Indeed.

  26. Great article, I been into web development with HTML and CSS for a year now, so Im pretty new to all this stuff but it feels nice having access to information like this one so well explained.
    As many said its a petty that this only works on webkit.
    Thank you Chris for the awesome stuff here!

  27. This Is What I Have Been looking for over like 6 months, Thanks a lot… just one question how to i change the color from red to like a dark gray

    Thanks, In Advanced

  28. Nima Alchemist

    With this, “background-attachment: scroll” doesn’t work. It is because of “overflow-y: scroll” in the “body”… Any solution?

  29. Ruben

    hi, isn’t this kind of what everyone is looking for and is it workable in all browsers? The website is in french which means i can’t read it but the scroll bar works quite swell for such a small amount of code, and i haven’t used it so i can’t tell what its drawbacks would be . . . Anyone willing to take a look at it?

    http://carotut.voila.net/tutoriel/scrollbar_en_images/index.htm

    thats the link! do reply as I’m not using it till someone answers one or more of my queries above

  30. Wojtek
    Permalink to comment#

    Nice and clear solution thx

  31. Felix Bakat
    Permalink to comment#

    not working in firefox

  32. Prasad
    Permalink to comment#

    Not working in firefox

  33. Harshal
    Permalink to comment#

    SUPER AWESOME post! #thanks

  34. Is it possible to overlay the scrollbar over content? The desired effect would be to fix the “shift” problem where some pages do not require a scrollbar. It would be nice if we could make the scrollbar sit on top of the “content” (actually just a blank gutter in my case) instead of pushing the site to the left.

  35. Permalink to comment#

    http://aokp.co is a good example of this.

  36. Hi friends,
    if I use this code
    ::-webkit-scrollbar {
    width: 12px;
    }

    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }

    it get apply on all the scrollbars, how can i apply it to a particular div ??????

  37. Bene W
    Permalink to comment#

    Hey, nice tutorial :-)
    But i’ve got a question: how do you realize this margin from your right border in your example (with the red scroll thumb)?

    I tried using it at -webkit-scrollbar-thumb (with margin: 30px), also at -webkit-scrollbar and body, but the scrollbar is everytime at right: 0px.
    Can you help me?

  38. keshav
    Permalink to comment#

    works only in chrome :(

  39. vinsens
    Permalink to comment#

    buddy, so now how make custom scrollbars in FF and IE ??

  40. Arul
    Permalink to comment#

    Hey it’s working fine and cool :)
    How can reduce the thumb height?

    • Arul
      Permalink to comment#

      hey its working in chrome only :( so how can i make custom scrollbars in firefox nd IE

  41. VK Prajapati
    Permalink to comment#

    It’s not working in firefox…

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".