Fabricator UI
Search documentation
Search pages, components, blocks, styles and colours.
A thin scrollbar that stays out of the way but is there when you need it.
Installation
The scrollbar styles ship with the foundations:
Native scrollbars
On devices with a fine pointer (a mouse or trackpad), every scrolling element gets a thin, low-contrast scrollbar that darkens on hover and while dragging. It needs no markup: any overflow-auto element picks it up. Touch devices keep their native overlay scrollbars.
- v1.23.0Maintenance
- v1.22.0Maintenance
- v1.21.0Maintenance
- v1.20.0Maintenance
- v1.19.0Maintenance
- v1.18.0Maintenance
- v1.17.0Maintenance
- v1.16.0Maintenance
- v1.15.0Maintenance
- v1.14.0Maintenance
- v1.13.0Maintenance
- v1.12.0Maintenance
- v1.11.0Maintenance
- v1.10.0Maintenance
- v1.9.0Maintenance
- v1.8.0Maintenance
- v1.7.0Maintenance
- v1.6.0Maintenance
- v1.5.0Maintenance
- v1.4.0Maintenance
- v1.3.0Maintenance
- v1.2.0Maintenance
- v1.1.0Maintenance
- v1.0.0Maintenance
Native, thinAny overflow container, no markup
ScrollAreaThin thumb that widens on hover
scrollbar-hideStill scrolls; no scrollbar
ScrollArea
The Scroll Area component draws its own scrollbar, so it looks the same in every browser:
- The thumb is 4px wide at rest and 6px on hover, inset 4px from the edge.
- It fades in when you hover or scroll (moderate, 210ms) and fades out shortly after (moderate exit, 160ms).
- The thumb colour steps up from 8% to 12% on hover and 16% while dragging.
Utilities
The scrollbar colour comes from the --overlay variable: black in light mode, white in dark mode.