scrollbar-gutter CSS property
Baseline
2024
Neu verfügbar
Seit December 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die scrollbar-gutter CSS Eigenschaft erlaubt es den Autoren, Platz für die Scrollleiste zu reservieren, um unerwünschte Layoutänderungen zu vermeiden, wenn der Inhalt wächst, gleichzeitig werden unnötige visuelle Elemente vermieden, wenn kein Scrollen benötigt wird.
Der scrollbar gutter eines Elements ist der Raum zwischen dem inneren Rand und dem äußeren Padding-Rand, in dem der Browser möglicherweise eine Scrollleiste anzeigt. Wenn keine Scrollleiste vorhanden ist, wird der Gutter als Erweiterung des Paddings angezeigt.
Der Browser entscheidet, ob klassische Scrollleisten oder überlagerte Scrollleisten verwendet werden:
- Klassische Scrollleisten werden immer in einem Gutter platziert und nehmen bei Vorhandensein Platz ein.
- Überlagerte Scrollleisten werden über den Inhalt gelegt, nicht in einem Gutter, und sind normalerweise teilweise transparent.
Syntax
/* Initial value */
scrollbar-gutter: auto;
/* "stable" keyword, with optional modifier */
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;
/* Global values */
scrollbar-gutter: inherit;
scrollbar-gutter: initial;
scrollbar-gutter: revert;
scrollbar-gutter: revert-layer;
scrollbar-gutter: unset;
Werte
auto-
Der Anfangswert. Klassische Scrollleisten erzeugen einen Gutter, wenn
overflowaufscrollgesetzt ist, oder wennoverflowaufautogesetzt ist und die Box überläuft. Überlagerte Scrollleisten verbrauchen keinen Platz. stable-
Bei Verwendung klassischer Scrollleisten ist der Gutter präsent, wenn
overflowaufauto,scrolloderhiddengesetzt ist, selbst wenn die Box nicht überläuft. Bei überlagerten Scrollleisten ist der Gutter nicht vorhanden. both-edges-
Wenn ein Gutter an einem der Anfangs-/Endränder der Box vorhanden wäre, wird ein weiterer Gutter auf der gegenüberliegenden Seite vorhanden sein.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | scrollende Boxen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
scrollbar-gutter =
auto |
stable && both-edges?
Beispiele
Die folgenden Beispiele zeigen, wie die verschiedenen Werte der Eigenschaft scrollbar-gutter ein scrollbares div-Element (.container) mit einem oder mehreren Absatz(en) darin beeinflussen würden.
Hinweis: In den Bildern zu den Beispielen sind die Systemeinstellungen des Benutzers auf klassische Scrollleisten eingestellt (immer sichtbar).
Beispiel 1
Verhindern Sie unnötige Layoutänderungen, da das Wachsen oder Schrumpfen des Inhalts das Auftauchen/Verschwinden der Scrollleiste verursacht. Ein Platz wird dafür reserviert.
.container {
scrollbar-gutter: stable;
}
Beispiel 2
Fügen Sie symmetrischen Abstand zu beiden Seiten der Box hinzu, sodass der Inhalt zentriert ist:
.container {
scrollbar-gutter: stable both-edges;
}
Beispiel 3
Richten Sie die Inhalte eines nicht-scrollenden Elements und eines scrollenden daneben aus:
Dieses Beispiel zeigt zwei divs nebeneinander. Das linke hat keinen Scroll, aber das rechte schon. Beide haben scrollbar-gutter angewendet, was auch Platz für das linke div reserviert, das keinen scrollbaren Inhalt hat. Dies ist eine gute Technik, um die Breite des Inhalts konsistent zu halten.
.container1 {
overflow: hidden;
scrollbar-gutter: stable;
}
.container2 {
scrollbar-gutter: stable;
}
Überlagerte Scrollleisten
Zum Referenzieren zeigt dieses Bild das gleiche div wie oben, jedoch mit den Systemeinstellungen des Benutzers auf überlagerte Scrollleisten gesetzt. Beachten Sie hier, dass die Scrollleiste nur angezeigt wird, wenn der Benutzer scrollt und über dem Inhalt liegt, sodass kein Platz dafür reserviert wird und die scrollbar-gutter-Eigenschaft keinen Effekt hat.
Spezifikationen
| Spezifikation |
|---|
| CSS Overflow Module Level 3 # scrollbar-gutter-property |