A tiny bit-o-CSS for Stable Scrollbar Gutters

I have my operating system configured to use visible scrollbars, a feature prominently elevated in macOS’ System Settings high enough that it would seem to imply some level of common usage (even though it’s not a default).

I don’t necessarily prefer the behavior this feature enables but I use it as an implied measure of quality when browsing the web .

I typically see the following problems:

1. Pages that have horizontal overflow (and a scrollbar to match) are more obvious.
2. Pages may move ~20px horizontally when sites toggle document-level overflow: hidden when toggling modals/dialogs.
3. On particulary slow pages you may even see pages shift when progressively rendering content slower than it can fill one “page fold.”

The easiest thing folks can do to workaround this issue is add html { overflow-y: scroll; } to your CSS resets, which can be a great way to very easily reduce those content layout shift issues! But this little snippet adds a scrollbar to every page.

To show scrollbars only when they’re needed (while keeping space for the scrollbar if it’s added later) use the scrollbar-gutter CSS property. scrollbar-gutter is Baseline 2024 Newly Available, so make sure you enhance it with a @supports guard.

html {
	overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
	html {
		overflow-y: auto;
		scrollbar-gutter: stable;
	}
}

This would look great in your reset stylesheet.

Related:

• Two Browsers Walked Into a Scrollbar (2019)
• w3c/csswg-drafts#5232: Drawing over the space reserved by scrollbar-gutter (via Lynn)
• Chromium issue when using both-edges (via Bramus)