The "scrollbar-gutter" property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar), allowing authors to prevent layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed. Note that the presence of the scrollbars themselves is determined by the "overflow" property and the decision of whether to use classical or overlay scrollbars is up to the User Agent.

Motivation

This property provides authors with more control over how their layouts interact with the scrollbars provided by the browser. For example, authors will be able to prevent excessive layout changes as the content expands while avoiding unwanted visuals when scrolling isn't needed. Note that the presence of the scrollbars themselves is determined by the overflow property and the decision of whether to use classical or overlay scrollbars is up to the browser/OS.

Specification

Working draft or equivalent

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 94
  • Chrome for Android release 94
  • Android WebView release 94

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Intent to Prototype url

Intent to Prototype thread

Search tags

css, layout, overflow, scrollbar, gutter, scrollbar-gutter,

Last updated on 2021-08-03