CSS Scrollbars

- 3 minutes read

Ah, good old scrollbars.

Customizing them has never been easier, but including support for all major browsers is still a bit of a challenge.

Chrome, Safari, Edge, and Opera all offer very advanced scrollbar customization. However, both Firefox and Internet Explorer require their own special polyfills.

Link to this section Colors

Let’s imagine we wanted a purple scroller on a gray background:

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: gray;
}

::-webkit-scrollbar-thumb {
    background-color: purple;
}

/* Firefox */
html {
    scrollbar-color: purple gray;
}

/* Internet Explorer */
body {
    scrollbar-face-color: purple;
    scrollbar-track-color: gray;
}

Link to this section Width

We can also customize the width of our scrollbars:

::-webkit-scrollbar {
    width: 8px;
}

/* Firefox */
html {
    scrollbar-width: thin;
}

Firefox only supports three scrollbar-width keyword values:

Link to this section Visibility

While this article is more focused on purely cosmetic scrollbar modifications, you can explicitly hide or show scrollbars using the overflow property. This works in all major browsers.

Here’s how you can forcefully hide a horizontal scrollbar:

html {
    overflow-x: hidden;
}

And here’s how you can forcefully hide a vertical scrollbar:

html {
    overflow-y: hidden;
}

You can forcefully show a scrollbar, even if content isn’t overflowing:

html {
    overflow-y: scroll;
}

There is a shorthand property to customize visibility for the horizontal and vertical scrollbar, respectively, in one line:

html {
    overflow: hidden scroll;
}

Link to this section Other scrollbar customizations

There’s also a lot of other customizations available to WebKit scrollbars.

I won’t enumerate them all in this article, but I have selected a couple of them to share. Keep in mind, none of the following snippets will work in Firefox or Internet Explorer.

For example, here is a rounded scrollbar:

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    border-radius: 8px;
}

And here’s the same rounded scrollbar, but with an inset shadow:

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .2);
    border-radius: 8px;
}

Link to this section Conclusion

I hope you enjoyed these customization options for your scrollbars! Personally, I modify the color of the scroller and the track al the time.

In fact, I’m using a custom scrollbar on this very site! Just click the “dark mode” button in the navigation bar, if you haven’t already.

Thanks for reading!