The first time I had my breath taken away by a humble scrollbar was on this very site. When CSS-Tricks v17 rolled out with its FAT CHONKY BOI, my jaw dropped.
I didn’t know you could do that on a professional site. And it would look… good?!
I appreciated so much about it—the gentle gradient, the reckless rounding, the blended background, the sheer satisfying CHONKINESS that dares you to click and wiggle it up and down just to marvel in its tactile heft. How bold! How avant-garde! What sheer, accessible, gracefully degrading delight!
Of course, because fun doesn’t last, the current CSS Tricks scrollbar is more grown-up and muted, light gray on black. Still on brand, still flexing subtle gradient muscle, but not so distracting that it detracts from the reading experience. In our ultra-functional world of MVPs and 80/20 rules, maximizing efficiency and hacking productivity, custom scrollbars evince something about craftsmanship. It says with no words what you can’t in a hundred.
Thanks to some standardization (with more on the way), the API is simple: seven pseudo-elements and eleven pseudo-classes that target (almost) every imaginable component and state of the trusty (and often overlooked) scrollbar. Sounds like a lot, but you can go very far with just three of them:
body::-webkit-scrollbar {
/* required - the "base" of the bar - mostly for setting width */
}
body::-webkit-scrollbar-track {
/* the "track" of the bar - great for customizing "background" colors */
}
body::-webkit-scrollbar-thumb {
/* the actual draggable element, the star of the show! */
}From here, it works like any other selected element, so bring your full bag of single div CSS tricks! Media queries work! Background gradients work! Transparency works! Margins with all manner of CSS units work! (Not everything works… I’d love to style cursor on my scrollbars for that authentic GeoCities look). I tried it out on my site with Lea Verou’s stash of CSS background gradients (my stash of stashes is here) and ended up with an atrocious combo of stripy barber pole (💈) for the thumb element and transparent hearts for the track. But it was most definitely mine—so much so that people have taken to calling it the “swyxbar” when I implemented a subtler version at work.
Every front-end developer should take this too far at least once in their careers. Live dangerously! Break the rules! Rage against the user agent! And maybe don’t ship scrollbars that break user expectations on a mass-market product (like Google Wave did back in the day)!
iirc Firefox lacks support for this, they do however support a very old IE standard that you can use as a workaround. A bit unusual!
Best I know, Firefox actually only supports the NEW standardized properties for custom scrollbars:
https://css-tricks.com/the-current-state-of-styling-scrollbars/#an-updated-version-of-a-fairly-consistently-styled-scrollbar-across-firefox-safari-chrome
Or maybe even some fancy Javascript scrollbar: https://grsmto.github.io/simplebar/
I made a css component that creates a cross browser version https://fylgja.dev/components/scrollbar/ until iOS dropped the
::-webkit-scrollbarsupportIt’s funny that so many browsers still the webkit version, but I am hoping more will support the newer spec.
We are back to IE6 and the custom-styles for scrolling bars every customers asked for back in 2000’s… and it was a already a bad idea.
Oh, so because something was poorly executed in the past means it can’t be useful or neat in the future? I believe newer CSS features are capable of making great custom scrollbars, for all the reasons cited in the post (e.g. the “chunkiness” can actually make it easier to control). Dismissing the idea altogether could be a missed opportunity on the right project.
The answer from the community back then (xhtml1.0 trans-pixel banner enabled Open-Source community, ’twas b4 web2.0… yeah, I’m that old) was: why redo something polished by 3 different branches of UI designers?
Yes, but again the point here is that was then (I’m that old as well) and this is now. We have the tools to do it more effectively today. By that logic, we may as well never override UA-styles.
I’m just pointing this was addressed. Don’t get me wrong.
I love the idea, and I’m playing with it right now.
I was just soooo feeling nostalgic.
(And I could even relate this to my early times in Flash, building scrollbars..)
I can certainly relate with that! Be sure to share what you make — I’d love to see it.