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, um unerwünschte Layoutänderungen zu verhindern, während der Inhalt wächst, und vermeidet unnötige visuelle Darstellungen, wenn kein Scrollen erforderlich ist.
Der scrollbar gutter eines Elements ist der Raum zwischen dem inneren Rand und dem äußeren Polsterrand, in dem der Browser eine Scrollleiste anzeigen kann. Wenn keine Scrollleiste vorhanden ist, wird die Leiste als Erweiterung der Polsterung dargestellt.
Der Browser entscheidet, ob klassische oder Overlay-Scrollleisten verwendet werden:
- Klassische Scrollleisten befinden sich immer in einer Leiste und verbrauchen Platz, wenn sie vorhanden sind.
- Overlay-Scrollleisten liegen über dem Inhalt, nicht in einer Leiste, 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 Initialwert. Klassische Scrollleisten erzeugen eine Leiste, wenn
overflowscrollist oder wennoverflowautoist und der Kasten überläuft. Overlay-Scrollleisten verbrauchen keinen Platz. stable-
Bei Verwendung klassischer Scrollleisten wird die Leiste vorhanden sein, wenn
overflowauto,scrolloderhiddenist, auch wenn der Kasten nicht überläuft. Bei Verwendung von Overlay-Scrollleisten wird die Leiste nicht vorhanden sein. both-edges-
Wenn eine Leiste an einem der Inline-Start-/Ende-Ränder des Kastens vorhanden wäre, wird auch auf der gegenüberliegenden Seite eine 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 scrollbar-gutter Eigenschaft ein scrollbares div Element (.container) mit einem oder mehreren enthaltenen Absätzen beeinflussen würden.
Hinweis: In den Bildern für die Beispiele sind die Systemeinstellungen des Benutzers auf klassische Scrollleisten eingestellt (immer sichtbar).
Beispiel 1
Um unnötige Layoutänderungen zu verhindern, wenn der Inhalt wächst oder schrumpft und die Scrollleiste erscheint oder verschwindet, wird Platz für sie reserviert.
.container {
scrollbar-gutter: stable;
}
Beispiel 2
Fügen Sie symmetrisches Leerzeichen auf beiden Seiten des Kastens hinzu, damit der Inhalt zentriert ist:
.container {
scrollbar-gutter: stable both-edges;
}
Beispiel 3
Die Inhalte eines nicht scrollenden Elements und eines daneben liegenden 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 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;
}
Overlay-Scrollleisten
Zur Referenz zeigt dieses Bild das gleiche div wie oben, aber mit den Systemeinstellungen des Benutzers auf Overlay-Scrollleisten eingestellt. Beachten Sie hier, dass die Scrollleiste nur angezeigt wird, wenn der Benutzer scrollt und über dem Inhalt liegt, sodass kein Platz für sie reserviert wird und die scrollbar-gutter Eigenschaft keine Wirkung hat.
Spezifikationen
| Specification |
|---|
| CSS Overflow Module Level 3 # scrollbar-gutter-property |
Browser-Kompatibilität
Loading…