coderef

scrollbar-gutterBaseline · Newly available

The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Dec 11, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–93Not supported
94+Supportedsince Sep 21, 2021
Current: 155
Edge
12–93Not supported
94+Supportedsince Sep 24, 2021
Current: 154
Firefox
1–96Not supported
97+Supportedsince Feb 8, 2022
Current: 157
Safari
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27
MobileChrome Android
18–93Not supported
94+Supportedsince Sep 21, 2021
Current: 155
Firefox Android
4–96Not supported
97+Supportedsince Feb 8, 2022
Current: 157
Safari iOS
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Dec 11, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: scrollbar-gutter.

Feature detection

CSS · check before using
@supports (scrollbar-gutter: initial) {
  /* styles that rely on scrollbar-gutter */
}

/* or in JavaScript */
if (CSS.supports("scrollbar-gutter", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (3). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
scrollbar-gutter94949718.2949718.2
scrollbar-gutter.auto94949718.2949718.2
scrollbar-gutter.stable94949718.2949718.2