How to Make Colored Scrollbars on Firefox

I finally figured out how to pull this off! So I'm documenting my journey and passing on my knowledge just in case someone else is tearing their hair out about this, too.

I ramble on a bit before getting to the code, so to skip all that click here :D

I remember being on Tumblr in the 2010s, tearing apart themes and putting them back together in every way I saw fit. I wasn't one of those 8px body font girlies, but I was pretty proud of the theme I had on my vivariiium blog (before I decided roleplay wasn't hitting it for me anymore, at least. I still have that code, I should clean it up and release it...).

So imagine my utter dismay when I start working on this site for the first time and find out that the switch from Chrome to Firefox nuked one of my most favorite little details: the custom scrollbar.

It wasn't just a case where I had to tweak one or two things to make it look right, either, like I had been doing with other stuff that had broke up until that point — the ::-webkit-scrollbar pseudo-element straight-up does not work in Firefox. Of course it wasn't a big big deal, but I liked my aesthetic scrollbars! Oh well, I finally found a downside to switching to Firefox, I guess.

(Let it be said, however, that this is the only downside I've hit so far. If you don't have Firefox, what are you even doing? Go get it.)

So I've been silently, pettily stewing about this for the better part of a year, mourning what would've been a cute feature... until this very night. (Or morning? Idk. I've been up for a while and time is meaningless.) And I've got Tumblr to thank! Not anyone on Tumblr, mind you, but the site itself.

Because Tumblr desktop has a custom scrollbar on Firefox. Nothing as fancy as what a ::-webkit-scrollbar would give you, but it's clearly there. A skinny blue (or transparent) track with a grey handle on its True Blue theme, and the colors change to match the other themes once you switch to them. So, like, the fuck's going on? Is there some Javascript nightmare going on in the background?

Not with the scrollbars, at least! Poking at one of Tumblr's stylesheets gave me this (formatted for clarity):

body, html {
     scrollbar-width:thin;
     scrollbar-color:rgba(var(--white-on-dark), .4) rgba(var(--white-on-dark), .1);
 }

scrollbar-width? scrollbar-color? Never seen those before. Lemme go back to that MDN Web Docs page and... here we go! Colored scrollbars and how to make them slim for the ~ aesthetic ~. Doesn't have a fifth of the versatility of ::-webkit-scrollbar but it's something! And it only fully works on Firefox, lol. But just slapping them in the stylesheet doesn't seem to work...

Oh? It only works in boxes, you say? So, if I do something like, oh, I dunno, put my site into a box a big as the screen I can finally get some colored scrollbars?

The path ahead is clear.

So the goals are:

  1. Make an #id that'll make a <div> that'll always be as big as the screen.
  2. Apply the scrollbar styling to said #id.
  3. Apply the #id to a <div> and put it into the existing pages.

But first let's see how these scrollbars look in isolation. Gonna make a small box so we don't have to put so much stuff into it to make it scroll, and we'll add some colors for the scrollbar:

#example {
     height: 150px;
     width: 300px;
     margin: 0 auto; /* centers the box on the page */
     padding: 10px; /* giving the text some breathing room */
     border: 2px solid indigo; /* giving the box some defined boundaries */
     box-sizing: border-box; /* padding usually makes your box slightly bigger than the pixels you define. this makes sure your box stays EXACTLY at the size you set */
     overflow-y: scroll; /* ensuring the box actually scrolls */
     scrollbar-width: thin; /* makes the scrollbar skinny and hides the arrows at the ends */
     scrollbar-color: indigo pink; /* the first color is the handle (the thing you click and drag to scroll), the second is the track (what the handle moves up and down on) */
 }

Now we apply that #id to a <div>, and put some normal text in it...

<div id="example">
   <p>...and <i>voilà!</i> We got ourselves a nifty scrolling box, with colored scrollbars. Pretty cool if I do say so myself ;3</p>
 </div>

...and voilà! We got ourselves a nifty little scrolling box, with colored scrollbars. Pretty cool if I do say so myself ;3

Umm. This isn't quite long enough to show off the scrolling yet. Uh. Meow-meow-meow-meow, meow-meow-meow-meow, meow-meow, meow-meow, meow-meow-meow-meow —

Now that we know what the scrollbars will look like, it's time to make the giant scrollable box that you'll put the entire contents of a page in. I've said it before, but it's extremely important that this box take up the entire screen, otherwise the scrollbars won't look seamless. First we go to the stylesheet and make sure there are no hidden margins or padding in body, like so:

body {
     margin: 0;
     padding: 0;
     /* these make sure there is no extra spacing that you didn't explicitly set */
 }

Now it's time for the box itself. Through some googling and some trial and error, I got this:

#scrollable {
     position: absolute; /* makes the box stay put, no matter what else is around or in it */
     top: 0; right: 0; bottom: 0; left: 0; /* sticks all sides of the box to the edges of the screen. essentially makes sure the box is always as big as whatever screen you're using */
     overflow-x:hidden; /* makes sure nothing can scroll to the side. change to scroll or auto if you actually want that */
     overflow-y:scroll; /* lets the box scroll up and down. change to hidden if you don't want that */
     scrollbar-color: #7924e3 #57fde5; /* giving our scrollbar some colors. make sure to swap these out to fit your site! */
     scrollbar-width: thin; /* slimming down the scrollbar. change to auto if you want the normal scrollbar width */
 }

Moment of truth! Go to the HTML of one of your pages, put <div id="scrollable"> right up under <body>, and put the closing </div> right before </body>.

<body>
     <div id="scrollable">
         <!-- EVERYTHING ELSE ON YOUR PAGE GOES HERE -->
     </div>
 </body>

Repeat the last step for every page you want the scrollbars on! As for how this looks, just check out the right side of the screen ;)

And there we go! The scrollbars on my site get the pop of color they so desperately needed ε-(´∀｀; ) However, these scrollbars definitely have their caveats.

  • Like I said before, this has nowhere near the customization of ::-webkit-scrollbar. With ::-webkit-scrollbar, you could do gradients and transparency, you could make both the track and the handle as thick or as thin as you want, you could add margins and padding, you could make the handle a perfect circle... With scrollbar-width and scrollbar-color, you get two colors and two uniform thicknessess and that's it. I have no idea how the Tumblr styling up there has partial transparency, or even if it works. Get your shit together, Firefox, you're the only one ::-webkit-scrollbar doesn't work for...
  • This method of colorful scrollbars not only styles the big scrollbar on the side, but every other scrollbar on the page. If these new "default" scrollbars clash with anything, you'll have to go into that #id or .class in the stylesheet and declare new scrollbars.
  • Once you've implemented <div id="scrollable">, you might find that whatever special effect you have on your page — like, say, a pixelated cat that chases your cursor — is appearing behind your content instead of in front of it. The quick fix for me was to put whatever script that runs the special effect immediately below <div id="scrollable">, so the special effect is actually in the scrollbox instead of behind it. If that doesn't work, maybe try messing with z-indexes? ¯\_( ﾟ ‸ ﾟ; )_/¯
  • As an extension of #1, scrollbar-width and scrollbar-color (and a third thing, scrollbar-gutter) only work on Firefox. Chrome and Edge seem to only have them in dev builds, and the rest of the browsers don't even try to support them. So if you're using anything else, this all just looks and reads like the ramblings of a madwoman :P
  • But you should join me in the madness. Take the plunge. Download Firefox.