Webkit is bringing back the custom scrollbars

… and I think that is awesome. Yes, IE did this first. Weird, they did something right. But that’s back from the First Great Browser War back when IE was still actually cool.

If you’re using Chrome or Safari (or some other webkit-based browser that I don’t know about), you’ll notice that I’m using them on my site. Yeah, I still need to standardize a bit, but the whole shebang is a work in progress right now. Forgive me for having some minor discrepancies.

So. I’m going to spend a bit of time talking about how to use this whole new thing.

In a WordPress blog, by the way, you can do this all by dropping it into the end of your theme’s style.css.

So, how does it all work?

A few CSS pseudo-elements! Yes, those lovely things that let you create pretty shadow effects or whatever it is you people do with them.

These are browser-prefixed, being really early features right now. They all begin with ::-webkit-scrollbar.

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

is what I’m using for that part. Now, only one of those will work at a time. The width applies on vertical scrollbars, and the height applies on horizontal scrollbars. It’s usually going to be better to do both the same, but if you’re going to be doing some weird orientation-specific styling than they can be different.

Next bit of styling is
::-webkit-srollbar-thumb {
width: 10px;
height: 10px;
}

OS X 'thumb'
1

That’s the only required styling. Just like in the ::-webkit-scrollbar bit, only one gets used at a time. After that, you can style it like pretty much any block element. Background, border, the works. Make it pretty. The thumb, by the way, is that bit that shows where you are in the document. On Macs, it’s that blue gelatinous-looking thing. See image 1.

Windows 7 'thumb'
2

In Windows, it’s… harder to describe. I’ll just drop a picture and apologize to any blind readers I have. Image 2 is your reference.

So, that’s how to style that bit.

Next important thing,

::-webkit-scrollbar-track

The track is the space that the thumb moves around in. I’ll assume you know what that is. The important thing to remember about scrollbar-track is that it isn’t just the visible part, it’s the entire track. Think of it as being a <div> with the thumb as another <div> inside of it. Like the thumb, you can style it with most of the same bits used for styling <div>s and such.

To style the visible part of the track, you use ::-webkit-scrollbar-track-piece.

What’s left? The buttons! ::-webkit-scrollbar-button

Again, they can be styled fairly effectively. They also take the property of having both width and height attributes, only one of which will apply.

Unfortunately, that isn’t enough to do it. OS X has both buttons at the bottom of the scrollbar, whereas Win7 has the scrollbar between the two. How do we style for that?

Why, pseudo-classes, of course! To any of the applicable bits, you can add any of the following list of pseudo-classes:

:horizontal

:vertical

:decrement

:increment

:double-button

:single-button

:no-button

:corner-present

:window-inactive

So, what do those all do? Well, :vertical and :horizontal are pretty obvious. They select only the scrollbars that are vertical or horizontal, respectively.

:increment and :decrement are slightly less clear. :increment styles the button (or track piece) that would scroll the page further down, or right. :decrement styles the button (or track piece, again) that goes up or left.

:double-button and :single-button are the important bit for making things look right on OS X versus Win7. Double-button will style only when the buttons are placed together, like OS X. Single-button selects for the split version like Windows uses.

:corner-present only makes sense if I step aside and explain the corners for a moment. The corner is the empty space that shows up when you have both vertical and horizontal scrollbars at the same time. You can use ::-webkit-scrollbar-corner to style it, and use ::-webkit-scrollbar-resizer to style that little lined bit that shows up on textarea fields.

Active and inactive scrollbar styles in iTunes
3

And finally, :window-inactive. This one only works in the Canary build of Chrome right now, but it’ll be pretty useful for creating more native-like apps later on. :window-inactive only displays when the browser window your page is being displayed in doesn’t have focus. iTunes on Windows is a good example of this: when it has the user’s focus, the scrollbar is the normal blue color. When the user’s focus moves to another window, it becomes a gray that detracts from the user’s focus less. (See image 3 for an example.) :window-inactive lets you do this same sort of thing, switching to an alternate visual style when the user is doing something else.

Don’t forget: :hover also works. Sadly, it looks like opacity can’t be set, but it’s safe to assume that any browser supporting this feature also has support for RGBA, so go ahead and swap that in instead.

Using these pseudo-elements and pseudo-classes, you can make some pretty good looking scrollbars for your site. I’m still tweaking the ones I’m using a bit, getting them to match the blog’s theme a bit.

Insofar as I know, Mozilla and Opera don’t have versions of this yet. IE might support the old methods for styling scrollbars, but I’m not going to bother checking that. Enjoy messing around with this!

— UPDATE —

I went in and updated the CSS, now the scrollbar is using the same color scheme as the rest of the site.