demo · v133

Fluent Scrollbars

Windows 11 native scrollbar shape. On Windows desktops you'll see the new fluent style; scrollbar-width and scrollbar-color still drive customisation. Hover the scrollers to see the bar appear / shrink.

OS-specific: only renders the Fluent shape on Windows 11 Chrome 133+. macOS / Linux / Chromebooks keep their native scrollbar. The page probes your platform and shows what you should expect.

default (scrollbar-width: auto)

thin (scrollbar-width: thin)

custom colors

hidden (scrollbar-width: none)

platform
—
scrollbar-width supported
—
scrollbar-color supported
—

the code

.thin   { scrollbar-width: thin; }
.custom { scrollbar-color: #0022ff #fff; }
.hidden { scrollbar-width: none; }

see also