scrollbar-gutter
Baseline
2024
Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die scrollbar-gutter-CSS-Eigenschaft ermöglicht es Autoren, Platz für die Scrollleiste zu reservieren und unerwünschte Layout-Änderungen zu verhindern, wenn der Inhalt wächst. Gleichzeitig werden unnötige visuelle Elemente vermieden, wenn kein Scrollen erforderlich ist.
Die scrollbar gutter eines Elements ist der Bereich zwischen der inneren Randlinie und der äußeren Polsterungslinie, in dem der Browser eine Scrollleiste anzeigen kann. Ist keine Scrollleiste vorhanden, wird der Gutter als Erweiterung der Polsterung dargestellt.
Der Browser bestimmt, ob klassische oder Overlay-Scrollleisten verwendet werden:
- Klassische Scrollleisten befinden sich immer in einem Gutter und verbrauchen Platz, wenn sie vorhanden sind.
- Overlay-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 wennoverflowaufautosteht und die Box überläuft. Overlay-Scrollleisten verbrauchen keinen Platz. stable-
Bei Verwendung klassischer Scrollleisten wird der Gutter vorhanden sein, wenn
overflowaufauto,scrolloderhiddengesetzt ist, auch wenn die Box nicht überläuft. Bei Verwendung von Overlay-Scrollleisten wird der Gutter nicht vorhanden sein. both-edges-
Wenn ein Gutter an einem der Inline-Anfangs-/Endränder der Box vorhanden wäre, wird ein weiterer auch 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 unterschiedlichen Werte der scrollbar-gutter-Eigenschaft ein scrollbares div-Element (.container) mit einem oder mehreren enthaltenen Absätzen beeinflussen würden.
Hinweis: In den Bildern zu den Beispielen sind die Systemeinstellungen des Benutzers auf klassische Scrollleisten eingestellt (immer sichtbar).
Beispiel 1
Um unnötige Layout-Änderungen zu verhindern, wenn das Wachstum oder Schrumpfen des Inhalts dazu führt, dass die Scrollleiste erscheint oder verschwindet, wird Platz dafür reserviert.
.container {
scrollbar-gutter: stable;
}
Beispiel 2
Symmetrischer Abstand zu beiden Seiten der Box hinzufügen, damit der Inhalt zentriert ist:
.container {
scrollbar-gutter: stable both-edges;
}
Beispiel 3
Den Inhalt eines nicht scrollenden Elements und eines daran anschließenden scrollenden Elements ausrichten: Dieses Beispiel zeigt zwei divs nebeneinander. Das linke hat keinen Scroll, aber das rechte schon. Beide haben scrollbar-gutter angewendet, was auch für das linke div, das keinen scrollbaren Inhalt hat, Platz reserviert. Dies ist eine gute Technik, um die Breite des Inhalts konsistent zu halten.
.container1 {
overflow: hidden;
scrollbar-gutter: stable;
}
.container2 {
scrollbar-gutter: stable;
}
Overlay-Scrollleisten
Zur Referenz zeigt dieses Bild dasselbe div wie oben, jedoch mit den Systemeinstellungen des Benutzers auf Overlay-Scrollleisten eingestellt. Hier wird die Scrollleiste nur angezeigt, wenn der Benutzer scrollt und über dem Inhalt liegt, sodass kein Platz dafür reserviert ist und die scrollbar-gutter-Eigenschaft keine Wirkung hat.
Spezifikationen
| Specification |
|---|
| CSS Overflow Module Level 3 # scrollbar-gutter-property |
Browser-Kompatibilität
Loading…