demo · v133
scrollbar-color & scrollbar-width on Fluent scrollbars
The Fluent restyle wasn't just visual — it's the first version of Chromium's Windows/Linux scrollbars that fully honours scrollbar-width and scrollbar-color. Five scrollers below, each setting different values, plus a UA / platform probe to show whether you're seeing Fluent or your platform's native chrome.
auto (default)
Default chrome. On Win11 in 133+, this is the Fluent style: thinner thumb, soft pill ends, hover expand.
Scroll. Scroll some more. Look at the thumb shape.
And again. Notice the gentle ease-in on hover.
This card has a long-enough body to overflow vertically.
The Fluent overlay only paints when needed.
Yet more content for vertical overflow.
scrollbar-width: thin
Thin variant. CSS-driven.
Useful inside dense panels where the default thickness fights the content.
Fluent honours this exactly — old chrome ignored it on Windows.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus lacinia odio vitae vestibulum vestibulum.
End of card.
scrollbar-color: blue / stone
Custom thumb (blue) and track (stone) via scrollbar-color.
Two-value syntax: thumb track.
Fluent supports both colours independently.
This used to require ::-webkit-scrollbar pseudo-elements.
Now the standard CSS works on the same Fluent rail.
End.
scrollbar-color: rose / paper
Different thumb. Different track. Same code path.
The colour value is just used as the paint for the Fluent thumb shape.
This colour is high enough contrast to be WCAG-safe.
Fluent's hover expansion still works on coloured thumbs.
End.
(More content here for overflow.)
scrollbar-width: none (hidden)
No visible scrollbar. Still scrollable with wheel/touch.
Common in carousels and tab strips.
Not new in 133 — included for completeness.
Scroll with the wheel.
It still works.
End of card.
| platform UA hint | — |
|---|---|
| likely scrollbar style | — |
| computed width on .auto scroller | — |