Every browser draws the scrollbar its own way, and none of those defaults were a decision anyone actually made.
Chrome on Windows draws a scrollbar you can't miss: wide, gray, square-edged. Firefox draws something thinner. Safari on macOS hides its scrollbar's thumb until the cursor gets near the edge, and then it's a faint blob you have to hunt for. None of that variation is deliberate. It's the browser's opinion about a UI element, applied without your system ever weighing in, the same way an unstyled button used to look like whatever the OS shipped it as. A scroll rail is rendered chrome sitting on top of every layout in the product, and until it's tokenized, it's one of the last pieces of surface area still answering to someone else's defaults. Five custom properties bring it back under the system. `--scrollbar-width` sets how thick the rail is in pixels. `--scrollbar-track` sets the background color of the channel it rides in. `--scrollbar-thumb` sets the resting color of the draggable bar. `--scrollbar-thumb-hover` sets what it resolves to once a cursor lands on it. `--scrollbar-radius` rounds the corners so the thumb reads as a deliberate shape instead of a browser-default rectangle. Each one controls exactly one visual fact about the rail, which is what makes them tokens instead of a single scrollbar.css file copy-pasted between projects.
Applying them is two small rule sets, not a redesign. WebKit browsers take it through `::-webkit-scrollbar`, `::-webkit-scrollbar-track`, and `::-webkit-scrollbar-thumb`, each one just referencing the matching `var()`. Firefox reads a shorter version of the same values through the `scrollbar-width` and `scrollbar-color` properties. Written once at the root and left alone, every scrollable element in the product, a sidebar, a modal body, a code block, a dropdown list, inherits the same rail without a component ever needing its own scrollbar rule.
A sidebar, a settings modal, and a syntax-highlighted code block stop looking like they belong to three different eras of the same site, because they're drawing the identical ten pixels instead of three browsers' guesses. The thumb turns teal on hover because the system said so, not because Chrome happened to ship a hover state and Safari didn't. It's a small surface, but it's one of the last pieces of the interface that was still running on autopilot, and naming it closes that gap the same way every other token in the system already has.
Follow @march4orthdesign on Instagram for the next one.
Leave a Reply