demo · v136

Fluent scrollbars

Probe your OS and Chrome to see whether you should see the new Fluent rendering. Scroll the panels below to compare the OS native scrollbar and the same content with author CSS that mimics Fluent everywhere.

Probing…
navigator.platform—
userAgent (truncated)—
UA-CH platformquerying…
Fluent applies on this OS?—

OS-native vs Fluent-look-alike

os scrollbar (no author CSS)

fluent-look (author CSS)

the code

/* This release is platform-side: no new API. To emulate Fluent
   on macOS / Linux, author CSS does most of the work: */
.panel {
  scrollbar-width: thin;                  /* standard */
  scrollbar-color: rgba(0,0,0,0.4) transparent;
}
.panel::-webkit-scrollbar { width: 16px; }
.panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

see also