v133 · miscellaneous
Dual-axis scroller
Both a vertical and horizontal scrollbar active at once — the corner intersection where Fluent scrollbar styling really shows. Toggle scrollbar-width and custom colours to see the Fluent design adapt in a spreadsheet and an image-grid layout.
Platform: detecting… — Fluent scrollbars ship on Windows 11 and Linux (Chrome 133+). On other platforms the demo still illustrates
scrollbar-width and scrollbar-color CSS behaviour.
Scrollbar settings (applied to all scrollers)
scrollbar-width
scrollbar-color (thumb / track)
thumb
track
Color presets
Spreadsheet (sticky headers)
overflow: scroll
Both scrollbars visible — corner fills
0,0
Image grid
overflow: scroll
Both scrollbars visible — corner fills
0,0
Code editor (long lines + many rows)
overflow: scroll
scrollLeft: 0px
scrollTop: 0px
scrollWidth: —px
scrollHeight: —px
/* Dual-axis scroller: both scrollbars active simultaneously */
.scroller {
overflow: scroll; /* or overflow-x + overflow-y */
scrollbar-width: thin; /* auto | thin | none (Chrome 121+) */
scrollbar-color: #3b82f6 #dbeafe; /* thumb track (Chrome 121+) */
/* Fluent on Win11: scrollbars will use the Fluent shape + hover glow */
}
/* The corner region (where the two scrollbars meet) is automatically
filled by the browser — Fluent gives it the same track colour */
/* Sticky row/col headers work independently of scrollbar styling */
th { position: sticky; top: 0; z-index: 1; }
td:first-child { position: sticky; left: 0; z-index: 1; }