Preventing layout shift from scrollbar appearance
When content grows tall enough to scroll, the scrollbar appears and narrows the layout, causing a visible jump. The old fixes were overflow-y: scroll (always shows the bar) or padding-right matching the scrollbar width. scrollbar-gutter: stable reserves the space upfront.
2 scrollbar-gutter: stable;
3}
2body { overflow-y: scroll; }
3/* Option 2: hardcode scrollbar width (fragile) */
4body { padding-right: 17px; }
5/* scrollbar width varies by OS and browser */
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
No layout shift
Space is reserved before the scrollbar appears. The page doesn't jump when content grows past the viewport.
No hardcoded widths
The browser reserves the correct amount automatically. No 17px magic numbers that break across platforms.
both keyword
scrollbar-gutter: stable both reserves space on both sides for symmetric layouts like centered content.
How it works
When a page gains enough content to scroll, the classic scrollbar appears and shrinks the content area — a visible jump. Two common fixes existed: overflow-y: scroll keeps the scrollbar always visible even on short pages, or padding-right: 17px hardcodes the scrollbar width, which varies across OSes and browsers.
scrollbar-gutter: stable reserves the scrollbar track space before the scrollbar appears. The layout width stays the same whether the page is scrollable or not. Important: on systems with overlay scrollbars — the default on macOS and iOS — this property has no visible effect since overlay scrollbars float on top of content rather than occupying layout space. To test it on macOS, go to System Settings → Appearance → Show scroll bars → Always.