Eliminating Scrollbar Layout Shifts with CSS scrollbar-gutter

On desktop operating systems that display classic non-overlay scrollbars (such as Windows), opening a modal dialog that sets overflow: hidden on <body> causes the scrollbar to vanish abruptly. This causes the entire page layout to shift horizontally by 15–17 pixels, creating visually jarring Cumulative Layout Shift (CLS).

The CSS scrollbar-gutter property allows authors to reserve dedicated space for the scrollbar gutter ahead of time, ensuring layout geometry remains rock solid.

Example #

html {
  scrollbar-gutter: stable;
}

Implementation #

/* Reserve gutter on both edges for symmetric designs */
.scroll-container {
  scrollbar-gutter: stable both-edges;
  overflow-y: auto;
  max-height: 400px;
  border: 1px solid var(--lightgray);
}

With scrollbar-gutter: stable, the browser allocates the gutter space whether content currently overflows or not, preventing content jumps when items expand dynamically.

Main Point: scrollbar-gutter: stable permanently eliminates layout jank and CLS penalties caused by appearing and disappearing desktop scrollbars.

Credits #

Photo by Joel Filipe on Unsplash

← Home