UI/UX law
// Perception & Gestalt;
Scrollbar Continuity
A scrollable panel's scrollbar should be restyled thin and on-brand, and left visible, rather than left as the operating system's bulky default or hidden away entirely.
Mechanism
Why it happens
The default scrollbar is drawn by the browser or OS chrome, not by the design system, so it's the one control on the page guaranteed to look different on Windows, macOS, Chrome, and Firefox, breaking the visual continuity of an otherwise consistent component. The common overcorrection is to hide it entirely, but a scrollbar is the primary affordance that tells someone a panel has more content than fits; remove it and that signal is gone; especially inside a nested scroll region, where there's no other cue that the content underneath the cursor scrolls independently from the page. A thin, branded thumb resolves both problems at once: it reads as part of the product's own visual language instead of the OS's, and it stays visible enough that the affordance survives.
Impact
Why it matters
- Default scrollbars are rendered by the OS or browser, not the design system, so they're guaranteed to clash with an otherwise consistent set of components
- Fully hiding a functional scrollbar removes the only visual cue that a panel has more content, which is a usability trap, not a cleanup
- The effect compounds inside nested scroll containers, where an invisible scrollbar is often the only sign that the inner panel scrolls at all
- A thin, on-brand thumb keeps the affordance while looking like it belongs to the product rather than the platform
Example
Without vs. with
A tall filter panel uses the browser's default grey scrollbar, which renders at a different width and colour on every OS, and a separate settings panel sets overflow: hidden with scrollbar-width: none, so it looks static even though it scrolls.
Both panels share scrollbar-width: thin with scrollbar-color: var(--brand) transparent, plus matching ::-webkit-scrollbar rules, so the thumb is slim, on-brand, and still visibly there.
Checklist
How to apply it
Set scrollbar-width: thin and scrollbar-color: var(--brand) transparent as the cross-browser baseline
Layer ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track for width, thumb colour, and radius control in WebKit/Blink
Keep the thumb low-contrast against the track at rest, and raise contrast on :hover or :active so it doesn't compete with content constantly
Never ship scrollbar-width: none (or the -ms-overflow-style hack) without a visible substitute; a scrollable area should always look scrollable
Recipe
Code example
Where it shows up