scrollbar-gutter PlaygroundWhen a scrollbar appears, the content inside an overflowing element shifts. The scrollbar-gutter property reserves the gutter space ahead of time so the layout never jumps. This playground shows side-by-side what each value (auto, stable, stable both-edges) does — toggle the content amount to watch the difference at the exact moment the scrollbar appears.
| Value | Behavior | When to use |
|---|---|---|
auto | The classic behavior — gutter appears only when the scrollbar appears. Content shifts the moment overflow starts. | Default; fine for ephemeral panels where the shift is invisible. |
stable | Reserves space for the scrollbar on the inline-end side always, even when no scrollbar is shown. No content shift on overflow. | Modal dialogs, sidebars, any container that toggles between short and long content. Pair with html { scrollbar-gutter: stable; } to stop the whole page from jumping when a modal opens. |
stable both-edges | Reserves a matching amount of space on the opposite edge too, so the content stays visually centered inside the box. | Centered content (a long article in a narrow column) where you care about symmetry on both sides. |
stable force (removed) | An earlier draft of the spec; not supported by any current browser. Use overflow-y: scroll if you want the scrollbar always visible. | — |
Compatibility: supported by Chrome 94+, Edge 94+, Firefox 97+, Safari 18.2+. On older Safari it falls back to auto — the layout shift returns but the page still works. On overlay-scrollbar systems (most touch devices, modern macOS by default), the gutter is zero-width either way, so stable has no visible effect.
html {
/* Reserve the page scrollbar gutter always, so locking body overflow
when a modal opens doesn't shift the underlying content rightward. */
scrollbar-gutter: stable;
}
body.modal-open {
overflow: hidden;
}