DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft scrollbar-gutter bietet Flexibilität, um zu bestimmen, wie der Browser den Platz nutzt, der für die Anzeige einer Scrollbar benötigt wird, die mit dem Inhalt auf dem Bildschirm interagiert. Die Spezifikation beschreibt es als „Reservierung von Platz für die Scrollbar“. Das Schöne daran ist, dass wir jetzt sicherstellen können, dass
- sich der Inhalt nicht umbricht, je nachdem, ob eine Scrollbar vorhanden ist oder nicht.
- eine konsistente Benutzererfahrung gewährleistet wird, unabhängig davon, ob sie „Overlay“-Scrollbars haben oder nicht.
body {
scrollbar-gutter: stable both-edges;
}Um sicherzustellen, dass wir alle auf dem gleichen Stand sind: Eine Scrollbar ist das Ding, das normalerweise an der Seite des Browsers angezeigt wird (in der Spezifikation formell als „User-Agent“ – oder UA – bezeichnet) und deine Scrollposition relativ zum gesamten verfügbaren Platz auf der Webseite anzeigt.
Diese waren traditionell ein visueller Container mit einem verschiebbaren Indikator. Diese werden als **klassische Scrollbars** bezeichnet. Der Indikator sitzt innerhalb der Spalte, und die Spalte nimmt physischen Platz auf dem Bildschirm ein, wenn sie angezeigt wird.
In letzter Zeit hat sich das Erscheinungsbild von Scrollbars jedoch zu etwas viel Minimalistischerem entwickelt. Wir nennen das **Overlay-Scrollbars**, und sie sind teilweise oder vollständig transparent, während sie über dem Seiteninhalt liegen. Anders ausgedrückt: Im Gegensatz zu klassischen Scrollbars, die physischen Platz auf dem Bildschirm einnehmen, liegen Overlay-Scrollbars über dem Bildschirminhalt.
Wo wir gerade dabei sind: Scrollbars können auch an anderen Stellen auftreten. Neben der rechten Seite des Browsers sehen wir Scrollbars bei HTML-Elementen, bei denen der Inhalt das Element überläuft und die overflow-Eigenschaft (oder overflow-x und overflow-y) auf den Wert scroll gesetzt ist. Und beachte, dass die Existenz von overflow-x bedeutet, dass wir zusätzlich zum vertikalen Scrollen auch horizontales Scrollen haben.
Darüber sprechen wir. Nicht der Indikator selbst, sondern der Container, der ihn hält. Das ist die Spalte. Ob ein Browser eine klassische oder eine Overlay-Scrollbar verwendet, liegt ganz beim UA selbst. Das liegt nicht in unserer Entscheidung. Das Gleiche gilt für die Breite der Scrollbar. Der User-Agent definiert das und gibt uns keine Kontrolle darüber.
Hier kommt scrollbar-gutter ins Spiel. Wir können festlegen, ob die Spalte in ihren klassischen und Overlay-Varianten vorhanden ist.
Syntax
.my-element {
scrollbar-gutter: auto | stable && both-edges?
}Ein doppeltes kaufmännisches Und **(&&)** trennt zwei oder mehr Komponenten, die alle, in beliebiger Reihenfolge, vorkommen müssen.
Ein Fragezeichen **(?)** zeigt an, dass der vorhergehende Typ, das Wort oder die Gruppe optional ist (null- oder einmal vorkommt).
Werte
auto(Initialwert): Fast das Standardverhalten, das bisher beschrieben wurde. Das Setzen der Eigenschaft auf diesen Wert erlaubt es klassischen Scrollbars, Platz in der Benutzeroberfläche von Elementen zu verbrauchen, bei denen dieoverflow-Eigenschaft aufscrolloderautogesetzt ist. Umgekehrt nehmen Overlay-Scrollbars überhaupt keinen Platz ein, da sie über dem Element liegen.stable: Dies fügt ein wenig meinungsbildendes Verhalten hinzu, indem immer Platz für die Scrollbar-Spalte reserviert wird, solange dieoverflow-Eigenschaft auf demselben Element aufscrolloderautogesetzt ist *und* wir es mit einer klassischen Scrollbar zu tun haben – selbst wenn die Box *nicht* überläuft. Umgekehrt hat dies keine Auswirkung auf eine Overlay-Scrollbar.
Der Working Draft der Spezifikation enthält eine sehr praktische Tabelle, die diese Definitionen nach ihren Kontexten aufschlüsselt und ihre Beziehung zu klassischen und Overlay-Scrollbars zeigt.
| overflow | scrollbar-gutter | Überlaufend | Nicht überlaufend |
|---|---|---|---|
| scrollen | auto | ja | ja |
| stable | ja | ja | |
| auto | auto | ja | |
| stable | ja | ja | |
| hidden | auto | ||
| stable | ja | ja | |
| visible, clip | auto | ||
| stable |
„G“ repräsentiert Fälle, in denen Platz für die Scrollbar-Spalte reserviert wird, „f?“ Fälle, in denen Platz für die Scrollbar-Spalte reserviert wird, wenn force angegeben wurde, und leere Zellen Fälle, in denen kein Platz reserviert wird.
Status der Spezifikation
Die Eigenschaft scrollbar-gutter ist im Overflow Module Level 4 definiert, welches sich im Status eines Working Draft befindet. Das bedeutet, dass dies noch in Arbeit ist und sich zwischen jetzt und dem Zeitpunkt, an dem der Entwurf zu Candidate Recommendation übergeht, ändern könnte.
Das Overflow Module Level 3 ist ebenfalls ein Working Draft, daher ist dies ein guter Hinweis darauf, dass (1) es einige Zeit dauern wird, bis scrollbar-gutter zu einer Empfehlung wird, und (2) es immer noch sehr in Arbeit ist.
Browser-Unterstützung
Zum Zeitpunkt der letzten Aktualisierung gibt es keine Browserunterstützung.
Verwandte Eigenschaften
Weitere Informationen
- Verhindern Sie unerwünschte Layout-Verschiebungen, die durch Scrollbars verursacht werden, mit der
scrollbar-gutterCSS-Eigenschaft - CSS Overflow Module Level 4 Working Draft
- GitHub Issue #92
- Die CSS Working Group bei TPAC: Was ist neu in CSS? Enthält einen mit der Hand gezeichneten Vorschlag für die Tabelle, die das Verhalten der Eigenschaftswerte darstellt.