A Guide To Using Custom Scrollbars On Your Site

[tweetmeme]”Don’t play with the defaults”, people say. It confuses the users by adding complexity, where simplicity will do just fine. But then, there’s “Think Different”. In this crowded internet space, your site needs to stand out from the mundane. If you know you can do something better, why not go the extra mile?

When I first saw Tim Van Damme’s blog, the scrollbar immediately got my attention. It was a regular [well designed] site, but with a revamped scrollbar totally fitting with his content. And I wanted that. As always, when curious on the web, I fire up Safari’s web inspector and look around. Turns out, it’s a feature of Webkit that allows you to modify the scrollbar to anything you’d like. There’s a catch to this however: you can’t modify the main scrollbar. Webkit provides this features so you can easily style ugly scrollbars within frames, but you can’t stop smart hackers from making the best of it.

So how does Tim do it then? The trick is to get the default scrollbars not to show, so that the content will be wrapped in a frame of its own—thereby triggering the secondary scrollbar. All of this resides in the primary stylesheet. If you have a WordPress blog, it’s most probably called style.css and is placed within your template directory. For Tumblr blogs, go into Custom HTML mode, and enter/edit changes between the the <style> tags. Your first step, is to alter the body element. It needs to be positioned at 0 for the top, left, and bottom, but add a few pixels on the right so your scrollbar isn’t touching the edges. Another important aspect here, is to set the “overflow-y” style to ‘scroll’. This takes any content that the body couldn’t display within its given size, and puts it in a scrollbar. The body of your CSS document should read as:

body   {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;

The second thing, and I don’t know why this happens, but you need to alter the style for html as well.

html {
overflow-y: auto;
background-color: transparent;

I don’t know why one needs to set the overflow-y to auto, but without it the new scrollbar doesn’t work properly, or at all. Setting the background-colour to transparent will better float the scrollbar, which would otherwise leave a white border on the right.

That should take care of your scrollbar, but wait, it looks the same?! That’s because you haven’t styled it yet. Here’s a walkthrough for each style element you need to add to your stylesheet:

::-webkit-scrollbar {
width: 10px;
height: 10px;

This is your entire scrollbar unit. Webkit-scrollbar accepts width and height for the scrollbar. One of the sides, in this case the height, will be fluid since it’s a vertical scrollbar. For best results, enter the same value for both.

::-webkit-scrollbar-button:end:increment  {
height: 30px;
display: block;
background-color: transparent;

This is the little button at the start and end of the scrollbar. You can style this as you would any other object. Width, height, background-color. Tim has made his completely transparent—rather the same colour as the document background, but you could even use a background image if you’d like. In the above example I’ve set the height at 30 pixels, so it makes the entire scrollbar appear as if floating within the page.

::-webkit-scrollbar-track-piece  {
background-color: #3b3b3b;
-webkit-border-radius: 6px;

This is the thin background upon which your scrollbar moves in. The gutter. Background-colour, border-radius, or any other basic styling works just fine here.

::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;

This will style the scrollbar thumb itself. Background-colour, add some -webkit-border-radius, add a border if you’d like to make it float within the scrolling area. I don’t know what height (or width when you specify the horizontal thumb) does to the setting, but Tim left it at 50px for both, which works for me. If your site uses a lot of background graphics, changing the opacity of each element will improve visuals while maintaining usability. Download this style.css file if you want to review the changes needed to achieve the scrollbar in the screenshot above.

That’s pretty much all you need to do to style the scrollbar, and it should work. The good thing is, if your visitor has something other than a Webkit browser, it degrades quite nicely—they get the default scrollbar. It’s not perfect degradation, given that there’s some whitespace at the right, but for people who use substandard browsers, that shouldn’t matter anyway. Remember that altering the scrollbar is a major change in user interface, one that a lot of users might not be comfortable with. Take care to make sure the widths, colours, and rounding matches your theme, and most importantly, know your audience. If you’re not sure, don’t do it.

I hope this guide helped in the least. If you have questions, I’m not sure I’ll be able to answer them, but I’ll try. This was an experimental article. While we’re usually focussed on appreciating the work of the greats, I thought a little education on the side couldn’t hurt. Let us know if feel against this kind of content on Beautiful Pixels, or preferably, if you do appreciate it.

Disclaimer: I have not studied the official Webkit texts, so if don’t hold me responsible for spreading misinformation. This is just how I’ve reverse engineered Tim Van Damme’s site. For further information, visit webkit.org’s article on styling scrollbars.

If you like reading Beautiful Pixels, you should Sign Up for our Membership.
You get to support this site and also get access to exclusive perks and features.

14 Responses

  1. Raj says:

    It’s a design principle that you shouldn’t modify the window chrome. Yes, if it is more fitting with your content, go ahead, but it’s generally frowned upon anyways.

    Nonetheless, this is the same method I’ve been using for a while. My scrollbar is here: http://idzr.org/k7gt3z – I don’t use it for the same reason mentioned above, but it’s fun to tinker around with, yes.

  2. overflow-y: auto; tells it to scroll vertically but only if it overflows the height of the container. If you tell it overflow-y: scroll; then the scrollbars always appear (even if the area doesn’t scroll). auto makes the scrollbars appear if the content needs to scroll but doesn’t show them otherwise.

  3. robert says:

    Is there anyway to make this apply to all sites i visit in a browser or is it site specific?

  4. Vukodlak says:

    Great post! I customized my website!

  5. Ilya says:

    If you’re going through with this hack, please at least have the sense to enable horizontal scrolling as well. Try for yourself: go to http://maxvoltar.com/ , hit ⌘-= to zoom in a couple of times, and then try to get to the right side of the page…

  6. Sebastian says:

    Thank you very much for this, looking forward to more! :)

  7. This technique strangely leaves a large margin at the bottom of the page, seemingly regardless of the height values present in the scrollbar code.

    Anyone got a fix for that?

  8. Paradox says:

    I use “pretty scrollbars” with my blog (linked from the author name).

    I still find it surprising people say you canno’t use this on the main scrollbar. If you visit my site, it will render on the main scrollbar.

    I do not know how this affects safari, but in Chrome, it renders on EVERY Scrollbar. Perhaps safari is presenting it.

    Oh and @Shaun Hargreaves: Do a margin reset on the toolbar properties. Every. Single. One. Of. Them.

  9. adi says:

    I just had to ask this…where can i get your wallpaper? is that the default wallpaper for snow leopard? :)

  10. I should make it a point to mention all wallpapers used in an article. The one in question is Aurora Mods by PsychoPulse. Simply beautiful.

  11. Chris P. says:

    This worked great on my Tumblr blog. All I did was paste every bit of code you had in the post into the Advanced section where there’s Custome CSS.


  12. Colin Grist says:

    This is really nice, I think it would be nice to not have the right: 10px; visible for all other users however, I know it looks great in Safari but if we just stated with some ‘conditional comment/or/safari only css hack’ not to have that appear for everyone else, at least the default scrollbar wouldnt look out of place indented for those users.

  13. Ismael Sobek says:

    Fantastic post. I’ve been trying to implement pure-css scrollbars for a while, but always ended up with an kludged version based on an image. This post made it easy.

    Another example of these implemented: my Google Reader theme, Lucidica http://ismaelsobek.com/lucidica/. I’ve finally got the scrollbars I wanted from the get-go. Thanks.

  14. Udit Sharma says:

    Nice Tutorial :)

Leave a Reply