Scrollbar
Thin, hidden or transparent scrollbars, and a stable gutter, across Firefox and WebKit.
Scrollbar utilities for any scroll container. Each one sets both the standard properties (scrollbar-width, scrollbar-color) and the WebKit pseudo-elements, so Firefox and Chromium/Safari agree.
| Class | Effect |
|---|---|
scrollbar-thin | Thin scrollbar — 8px in WebKit. |
scrollbar-none | Hides the scrollbar; the container still scrolls. |
no-scrollbar | Alias of scrollbar-none. |
scrollbar-gutter-stable | Reserves the gutter, so content does not shift when it appears. |
scrollbar-thumb-transparent | Makes the thumb transparent. |
scrollbar-track-transparent | Makes the track transparent. |
contain-content | contain: content — an isolation hint for long, busy scrollers. |
Examples
Basic
scrollbar-thin
no-scrollbar
scrollbar-gutter-stable
Hiding the scrollbar while scrolling
The transparent utilities are variant-composable, which is how MessageScroller fades its scrollbar out during an autoscroll and back in when the reader takes over:
scrollbar-none removes the affordance, not the scrolling. Keep a visible cue — a scroll-fade edge, or a scroll button — so it is still clear there is more to read.