The scrollbar-gutter CSS property allows authors to reserve the space for the
scrollbar placed at the inline edges, preventing unwanted layout changes when
the content grows and overflows the scroll container. Note that scrollbar-gutter
only has an effect when the OS uses "classic" scrollbar. The overlay scrollbar
(i.e. macOS default scrollbar style when using the touchpad) doesn't occupy
the space at all.
I intend to turn on the support of scrollbar-gutter by default on Firefox 97.
Bug:
Standard:
The spec has a nice table summarizing the interaction of "overflow" and
"scrollbar-gutter" properties.
Platform coverage:
All platforms.
Preference:
layout.css.scrollbar-gutter.enabled
DevTools bug:
This feature doesn't require extra work in DevTools.
Other browsers:
Google Chrome shipped scrollbar-gutter in version 94 in September 2021.
https://chromestatus.com/features/5746559209701376Apple Safari has no sign of the implementation yet.
https://bugs.webkit.org/show_bug.cgi?id=167335web-platform-tests:
https://wpt.fyi/results/css/css-overflow?label=master&label=experimental&aligned&q=scrollbar-gutterAdditional wpt tests are added in Bug 1715112.
Thanks,
Ting-Yu Lin