CSS/Eigenschaften/scrollbar-gutter

Browserunterstützung
caniuse.com

Die Eigenschaft scrollbar-gutter reserviert in einem Scroll-Container Platz für einen möglichen Scrollbar, um zu verhindern, dass das Erscheinen oder Verschwinden des Scrollbars das Layout verschiebt.

Erlaubte Werte

• auto: Platz für Scrollbars wird bei Bedarf geschaffen, wodurch sich das Layout verändern kann.
• stable: Platz für Scrollbars wird ständig bereitgehalten und die Scrollbars bei Bedarf ein- und ausgeblendet. Das Layout bleibt unverändert.
• stable both-edges: Es wird nicht nur auf der Seite Platz reserviert, wo der Scrollbar erscheinen kann, sondern auch auf der gegenüberliegenden Seite. Sie können diese Option nutzen, wenn Sie eine symmetrische Darstellung bevorzugen.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

alle Scroll-Container

Vererbung

nein

animierbar

ja

Beispiel

article {
  scrollbar-gutter: stable both-edges;
  overflow-y: auto;
}

article-Elemente erhalten bei Bedarf einen vertikalen Scrollbar. Der Platz für diesen Scrollbar wird auf beiden Seiten reserviert.

Siehe auch

• Benutzeroberfläche - Scrollbars

Weblinks

• Spezifikation (W3C): scrollbar-gutter property
• MDN: scrollbar-gutter
• Details: caniuse.com