demo · v133

Scrollbar Anatomy

Chrome 133 on Windows / Linux renders scrollbars with the Windows 11 Fluent design language. The Fluent scrollbar honours standard CSS properties: scrollbar-width (thin / auto / none) and scrollbar-color (thumb track). This tool lets you configure every CSS scrollbar property live and compare five scrollable regions — each with a distinct property combination — plus a property support table.

Checking CSS scrollbar property support…

CSS scrollbar property support

Property Chrome 133 Firefox Safari Notes
scrollbar-width ✓ auto / thin / none ✓ auto / thin / none ⚠ auto / none only Fluent thin = ~4px on Windows 11
scrollbar-color ✓ <color> <color> ✓ <color> <color> ⚠ partial First value = thumb, second = track
::-webkit-scrollbar ⚠ legacy non-standard ⚠ prefixed only ✓ extensive support Use scrollbar-width/color instead
overflow: overlay ⚠ deprecated ⚠ deprecated ⚠ deprecated Use overlay scrollbar settings instead 
/* Chrome 133 Fluent Scrollbar — CSS control */
.my-container {
  overflow-y: scroll;

  /* Standard properties — work on Fluent scrollbars */
  scrollbar-width: thin;                    /* auto | thin | none */
  scrollbar-color: #3b82f6 #e2e8f0;         /* thumb track */
}

/* Variant: hidden scrollbar (content still scrollable) */
.hidden-scroll {
  overflow-y: scroll;
  scrollbar-width: none;
}

/* Variant: branded scrollbar */
.branded {
  scrollbar-color: hsl(220 90% 56%) hsl(220 20% 95%);
  scrollbar-width: thin;
}

see also