Scrollbars Get a Style Upgrade

It used to be that a custom scrollbar was a sign you'd wandered onto a GeoCities page from 1999, complete with a MIDI soundtrack and a visitor counter. But when CSS-Tricks redesigned with its oversized, rounded scrollbar, it was a revelation: something functional could also be fun, bold, and still tasteful.

That playful look has since settled into something more subdued on the site, but the lesson stuck: scrollbars are a place for craftsmanship, not just default browser chrome. Styling them is now a standardized feature, with a small set of pseudo-elements and pseudo-classes covering nearly every part of the scrollbar and its states. You can get a long way with just three pseudo-elements:

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

Once you're styling the scrollbar itself, its scrollbar-thumb, or the scrollbar-track, it behaves like any other element in your CSS toolkit. That means background gradients, transparency, and media queries all apply. You can even use margins with standard CSS units to fine-tune placement.

That flexibility makes it easy to go overboard. One developer tried it with a wild combination: a barber-pole striped thumb paired with a transparent track filled with hearts. The result was visually chaotic but unmistakably personal, so much so that coworkers nicknamed it the "swyxbar." A toned-down version later made it into a production app at work.

There are still limits—you cannot, for instance, style the cursor over the scrollbar for an authentic old-school feel. And a word of caution to the adventurous:

  • Custom scrollbars can break user expectations when used on a mass-market product.
  • Remember the Google Wave debacle, where unconventional scrollbars frustrated users.

Still, every front-end developer should experiment with this at least once. It's a chance to push against the user agent defaults, express a bit of personality, and create something that is unapologetically your own—a small but satisfying piece of a site's character.