A Guide To Using Custom Scrollbars On Your Site

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