scrollbar-gutter
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
An element's scrollbar gutter is the space between the inner border edge and the outer padding edge, where the browser may display a scrollbar. If no scrollbar is present, the gutter will be painted as an extension of the padding.
The browser determines whether classic scrollbars or overlay scrollbars are used:
Classic scrollbars are always placed in a gutter, consuming space when present.
Overlay scrollbars are placed over the content, not in a gutter, and are usually partially transparent.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 94 | 94 | 97 | 18.2 | 94 | 18.2 | |
auto | 94 | 94 | 97 | 18.2 | 94 | 18.2 |
stable | 94 | 94 | 97 | 18.2 | 94 | 18.2 |
Syntax
/* Always reserve space for the scrollbar */
.content {
overflow: auto;
scrollbar-gutter: stable;
}
/* Reserve space symmetrically on both sides */
.centered-content {
overflow: auto;
scrollbar-gutter: stable both-edges;
}Live demo
Use cases
-
Browser-native behavior
Use scrollbar-gutter to rely on the platform for behavior that would otherwise require extra code or CSS complexity.
-
Progressive enhancement
Enhance the experience where support exists while keeping a solid baseline elsewhere.
Cautions
- Check browser support and actual product need before adding a new platform feature widely.
- Keep feature usage understandable so future contributors know why it was chosen.
Accessibility
- New platform features should still preserve readable defaults and robust interaction patterns.
- Verify that enhancement paths do not leave unsupported environments with a broken experience.