The Current State of Styling Scrollbars

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Grow sales with a smart marketing platform. Try Mailchimp today Mailchimp tracking pixel

If you need to style your scrollbars right now, one option is to use a collection of ::webkit prefixed CSS properties.

Sadly, that doesn’t help out much for Firefox or Edge, or the ecosystem of browsers around those.

Update November 2019: Standards have stepped up and given us scrollbar-color and scrollbar-width and Firefox is already supporting them. Your best bet right now is probably to use them and combine them with the ::webkit-scrollbar stuff. Demo later in this article.

But if that’s good enough for what you need, you can get rather classy with it:

There are loads of them on CodePen to browse. It’s a nice thing to abstract with a Sass @mixin as well.

There is good news on this front! The standards-bodies-that-be have moved toward standardizing methods to style scrollbars, starting with the gutter (or width) of them. The main property will be scrollbar-gutter and Geoff has written it up here. Hopefully, Autoprefixer will help us as the spec is finalized and browsers start to implement it so we can start writing the standardized version and get any prefixed versions from that.

But what if we need cross-browser support?

If styled scrollbars are a necessity (and I don’t blame you), then you’ll probably have to reach for a JavaScript solution. There must be dozens of libraries for that. I ran across simplebar and it looks like a pretty modern one with easy instantiation. Here’s a demo of that:

Here’s another one called simple-scrollbar:

Das Surma did a very fancy tutorial that creates a custom scrollbar that doesn’t actually require any JavaScript when scrolling (good for perf), but does require some JavaScript setup code.

Custom scrollbars are extremely rare and that’s mostly due to the fact that scrollbars are one of the remaining bits on the web that are pretty much unstylable (I’m looking at you, date picker). You can use JavaScript to build your own, but that’s expensive, low fidelity and can feel laggy. In this article, we will leverage some unconventional CSS matrices to build a custom scroller that doesn’t require any JavaScript while scrolling, just some setup code.

I’ll embed a copy here:

An updated version of a fairly consistently styled scrollbar across Firefox/Safari/Chrome