Fix Scrollbar Layout Shift with scrollbar-gutter

A quick look at the scrollbar-gutter CSS property and how it prevents layout shift caused by classic scrollbars appearing and disappearing.

Published on February 10, 2026 in CSS

If you’ve ever noticed your page content shifting slightly to the left when navigating from a short page to a long one, you’re not imagining things. That shift is caused by the browser’s scrollbar appearing and stealing space from your layout.

The problem

On systems with classic (non-overlay) scrollbars — primarily Windows and Linux — the scrollbar occupies around 15 pixels of horizontal space inside the viewport. When a page is short enough that it doesn’t need scrolling, there’s no scrollbar and your content has the full width. The moment the page is long enough to scroll, the scrollbar appears and your content gets pushed to the left.

This is especially noticeable on sites with centered layouts. Links between pages of different lengths cause a visible content jump.

The fix

The scrollbar-gutter property tells the browser to reserve space for the scrollbar at all times, whether or not the page actually scrolls.

html {
  scrollbar-gutter: stable;
}

That’s it. The browser now always reserves that ~15px on the right side of the viewport. When the scrollbar isn’t needed, the space is empty. When it is, the scrollbar fills it. No shift.

Centering with both-edges

If reserving space on one side throws off your centered layout, you can balance it out:

html {
  scrollbar-gutter: stable both-edges;
}

This reserves equal space on both sides of the viewport, keeping your content perfectly centered regardless of scrollbar presence.

Watch out for double scrollbars

A common pitfall: if both html and body are set up as scroll containers, you’ll get two scrollbars. This typically happens when both elements have overflow-x: hidden, which implicitly sets overflow-y: auto and creates two independent scrollable boxes.

The fix is to let only html handle scrolling. Remove overflow-x: hidden from body — the one on html already covers horizontal overflow for the entire page.

html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* No overflow on body — let html handle it */
body {
  min-height: 100vh;
}

A note on macOS

macOS uses overlay scrollbars by default. These float on top of content and don’t take up any space, so scrollbar-gutter has no visible effect. The property is still safe to use — it simply does nothing when overlay scrollbars are active. Your Windows and Linux visitors are the ones who benefit.

Browser support

scrollbar-gutter reached baseline support across all major browsers in December 2024. It’s safe to use without a fallback.