Scrollbar Shenanigans

2021 Note: I published a follow up on CSS Tricks’ end of year roundup

If you visit this site on a desktop Webkit browser (Chrome, Safari, Opera, new Edge) you will see a new fancy scrollbar:

This is a result of me constantly admiring the chunky fat scrollbar on CSS Tricks. They have a really good guide on it: https://css-tricks.com/the-current-state-of-styling-scrollbars/. I’m told this is a webkit prefixed feature, but scrollbar-gutter is on its way to being a standardized CSS property in Overflow Module Level 4, but it seems there will also be scrollbar-color and scrollbar-width.

I like that it is kind of a frivolous thing that has a natural fallback (on non Webkit and on mobile) so you don’t have to worry about getting fancy.

On a total whim I decided to try it out on Svelte Zen Garden. Here is what I discovered in my messing around.

Minimal styled scrollbar example

Go put this on your site:

body::-webkit-scrollbar {
  width: 2rem;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
  background-color: #444444;
}
body::-webkit-scrollbar-thumb {
  background-color: red;
}

Or even better, try it out on Svelte Zen Garden.

The PseudoElements

You have to specify ::-webkit-scrollbar for any styling to work. (Try removing it, you’ll see) It doesn’t really matter what you specify, so you can specify a nonsensical property, but you need something:

body::-webkit-scrollbar {
  color: red;
}

But most often, you will want to specify the width:

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

You can specify any CSS length unit - I found vw a nice one as it scales down as you resize the window smaller and never gets too small.

Once you’ve specified ::-webkit-scrollbar, you can then style ::-webkit-scrollbar-track (the bigger gutter of the scrollbar) and ::-webkit-scrollbar-thumb (the smaller thing that actually moves as you scroll).

Those 3 are good enough to use, but there is a full list of other elements and selectors:

::-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 */ }

/* pseudo-class selectors */
:horizontal {}
:vertical {}
:decrement {}
:increment {}
:start {}
:end  {}
:double-button {}
:single-button {}
:no-button {}

You can style them almost however you like!

Things you can do

You can add fancy gradient patterns! Pick gradients from Lea Verou.

/* other selectors omitted */
body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #D62929;
  background-image: -webkit-linear-gradient(45deg,
                                            rgba(255, 255, 255, .2) 25%,
                                            transparent 25%,
                                            transparent 50%,
                                            rgba(255, 255, 255, .2) 50%,
                                            rgba(255, 255, 255, .2) 75%,
                                            transparent 75%,
                                            transparent)
}

You can add margins!

/* other selectors omitted */
body::-webkit-scrollbar-track {
    margin: 20vh;
}

You can add transparency!

Media queries work!

You can target scrollbars on any overflow: scroll element, not just body!

Note: Unspecified, styling applies to horizontal as well as vertical scrollbars, which you can customize with :horizontal and :vertical.

Not Everything Works

It doesnt work on mobile!

Setting cursor: pointer doesn’t work, but it’d be fun to change the cursor on scrollbar hover.

Don’t Do This

You can put your scrollbar on the left!

Crazy Scrollbar Examples On The Web

Of course most people should be more subtle with their scrollbars.

But I like a little personality.

• CSS Tricks
• Estee Tey’s Scrollbar Playground
• Where else?