CSS scrollbar-gutter

[lukewarlow]

Description

The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

Specification

https://drafts.csswg.org/css-overflow/#scrollbar-gutter-property

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-overflow?label=master&label=experimental&aligned&q=scrollbar-gutter

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

WebKit (neutral standards position): WebKit/standards-positions#135

Gecko (Intent to Ship): https://groups.google.com/a/mozilla.org/g/dev-platform/c/pAh2tDhBFOU/m/wQBctGKCCwAJ

Blink (Intent to Ship): https://groups.google.com/a/chromium.org/g/blink-dev/c/71vtc_Xv7jk/m/EezoVS9dBQAJ

Browser bug reports

Bugs in Chromium's implementation: https://bugs.chromium.org/p/chromium/issues/detail?id=1459802 (I've fixed this one), https://bugs.chromium.org/p/chromium/issues/detail?id=1449260,
https://bugs.chromium.org/p/chromium/issues/detail?id=1251856

Bug in firefox's implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=1839401

WebKit Implementation request: https://bugs.webkit.org/show_bug.cgi?id=167335

Developer discussions

No response

Polls & Surveys

scrollbar-gutter was mentioned in State of CSS 2023 and State of CSS 2022.

Existing Usage

https://chromestatus.com/metrics/css/timeline/popularity/671

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

There is a partial implementation inside of WebKit.

[itayganor]

Yes, please!

The deprecation of overflow: overlay in Chrome 115 broke so many layouts.

There was a common pattern of adding symmetrical, defined padding on the inline axis, and then applying overflow: overlay;. That way, You know exactly how much padding your content has, regardless of whether the scrollbar is visible or not.

Using scrollbar-gutter: stable both-edges; has a similar result regarding symmetry, but you can only guess the size of that gutter (every browser defines it differently, using different rules).

This makes defining a layout with strict spacing units so hard.

[dkrecichwo]

Also note the issues mentioned in https://bugs.chromium.org/p/chromium/issues/detail?id=1251856

[wpt-interop]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.

[zcorpan]

Thank you for proposing CSS scrollbar-gutter for inclusion in Interop 2024.

We are pleased to let you know that this proposal was accepted as part of the Scrollbar Styling focus area. You can follow the progress of this focus area on the Interop 2024 dashboard.

For an overview of our process, see the proposal selection. Thank you for contributing to Interop 2024!

Posted on behalf of the Interop team.