Die scrollbar-gutterEigenschaft bietet Flexibilität, um zu bestimmen, wie viel Platz der Browser zum Anzeigen einer Bildlaufleiste verwendet, die mit dem Inhalt auf dem Bildschirm interagiert. Die Spezifikation beschreibt es als "Platz für die Bildlaufleiste reservieren" und das ist sinnvoll, da dies letztendlich eine Rinne ist: ein Container, der Platz für alles, was sich darin befindet, reserviert und von anderen Elementen trennt.
Wir sind also alle auf derselben Seite. Eine Bildlaufleiste befindet sich normalerweise auf der rechten Seite des Browsers (in der Spezifikation formell als „Benutzeragent“ oder UA bezeichnet) und gibt Ihre Bildlaufposition relativ zur Gesamtsumme an verfügbarer Platz auf der Webseite.
Diese waren traditionell ein visueller Behälter mit einer Schiebeanzeige. Diese werden als klassische Bildlaufleisten bezeichnet . Die Anzeige befindet sich in der Rinne und die Rinne nimmt bei der Anzeige physischen Platz auf dem Bildschirm ein.
In letzter Zeit tendierte das Erscheinungsbild der Bildlaufleisten jedoch zu etwas viel Minimalerem. Wir nennen diese Overlay-Bildlaufleisten und sie sind entweder teilweise oder vollständig transparent, während sie über dem Seiteninhalt sitzen. Mit anderen Worten, im Gegensatz zu klassischen Bildlaufleisten, die physischen Platz auf dem Bildschirm einnehmen, befinden sich überlagerte Bildlaufleisten über dem Bildschirminhalt.
Während wir gerade dabei sind, können an anderen Stellen Bildlaufleisten angezeigt werden. Neben der rechten Seite des Browsers werden Bildlaufleisten für HTML-Elemente angezeigt, in denen der Inhalt das Element überläuft und die overflowEigenschaft (oder overflow-xund overflow-y) auf den scrollWert gesetzt werden. Und beachten Sie, dass das Vorhandensein von overflow-xMitteln das horizontale Scrollen zusätzlich zum vertikalen Scrollen ermöglicht.
Darüber reden wir. Nicht der Indikator selbst, sondern der Container, in dem er sich befindet. Das ist die Gosse. Ob ein Browser eine klassische oder eine Overlay-Bildlaufleiste verwendet, hängt ganz von der UA selbst ab. Das können wir nicht entscheiden. Dies gilt für die Breite der Bildlaufleiste. Der Benutzeragent definiert das und gibt uns keine Kontrolle darüber.
Hier scrollbar-gutterkommt es ins Spiel. Wir können darlegen, ob die Rinne in ihren klassischen und Overlay-Variationen vorhanden ist.
Syntax
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Ein doppeltes kaufmännisches Und (&&) trennt zwei oder mehr Komponenten, die alle in beliebiger Reihenfolge auftreten müssen.
Ein Fragezeichen (?) Zeigt an, dass der vorhergehende Typ, das vorhergehende Wort oder die vorhergehende Gruppe optional ist (kommt null oder einmal vor).
Werte
auto(Anfangswert): So ziemlich das bisher beschriebene Standardverhalten. Wenn Sie die Eigenschaft auf diesen Wert setzen, können klassische Bildlaufleisten Immobilien in der Benutzeroberfläche für Elemente verwenden, für die dieoverflowEigenschaft dieser Elemente aufscrolloder festgelegt istauto. Umgekehrt nehmen Überlagerungs-Bildlaufleisten überhaupt keinen Platz ein, wenn sie auf dem Element sitzen.stable: Dies fügt ein wenig eigenwilliges Verhalten hinzu, indem immer Platz für die Rinne der Bildlaufleiste reserviert wird, solange dieoverflowEigenschaft für dasselbe Element aufscrolloder gesetzt istautound es sich um eine klassische Bildlaufleiste handelt - auch wenn die Box nicht überläuft. Umgekehrt hat dies keine Auswirkungen auf eine Überlagerungs-Bildlaufleiste.always: Dies funktioniert genausostable, stellt jedoch sicher, dass der Platz für die Rinne der Bildlaufleiste immer reserviert ist, unabhängig davon, ob die Bildlaufleiste klassisch oder überlagert ist und ob der Inhalt überläuft oder nicht.both: Dies besagt, dass eine Bildlaufleistenrinne auf beiden Seiten des Elements platziert wird, wenn die Standardrinne angezeigt wird. Sie können sehen, wie nützlich dies sein kann, wenn Ihr Design auf beiden Seiten des Elements den gleichen Abstand erfordert.force: Dies ist die gleiche sowohl als Anwendungstableund inalwaysdem das Element deroverflowfestgelegt istauto,scroll,visible,hiddenoderclip.
Der Arbeitsentwurf der Spezifikation enthält eine sehr praktische Tabelle, in der diese Definitionen in ihre Kontexte unterteilt werden, um die Beziehung zu klassischen und überlagerten Bildlaufleisten anzuzeigen.
| Klassische Bildlaufleisten | Überlagerungs-Bildlaufleisten | ||||
|---|---|---|---|---|---|
| Überlauf | Bildlaufleisten-Rinne | Überlaufen | Nicht überfüllt | Überlaufen | Nicht überfüllt |
| scrollen | Auto | G | G | ||
| stabil | GM | G | |||
| immer | G | G | G | G | |
| Auto | G | ||||
| stabil | G | G | |||
| immer | G | G | G | G | |
| sichtbar, versteckt, Clip | Auto | ||||
| stabil | f? | f? | |||
| immer | f? | f? | f? | f? | |
"G" steht für Fälle, in denen Platz für die Rinne der Bildlaufleiste reserviert ist. "F?" Fälle, in denen Platz für die Bildlaufleistenrinne reserviert ist, wenn Kraft angegeben wurde, und leere Zellen Fälle, in denen kein Platz reserviert ist.
Spezifikationsstatus
Die scrollbar-gutterEigenschaft wird im Überlaufmodul Level 4 definiert, das sich im Status "Arbeitsentwurf" befindet. Dies bedeutet, dass dies noch in Arbeit ist und sich bis zum Übergang des Entwurfs zur Kandidatenempfehlung ändern kann.
Die Spezifikation des Überlaufmoduls der Stufe 3 ist ebenfalls ein Arbeitsentwurf. Dies ist ein guter Hinweis darauf, dass (1) es einige Zeit dauern wird, scrollbar-gutterbis eine Empfehlung vorliegt, und (2) dass sie noch sehr weit fortgeschritten ist.
Browser-Unterstützung
Zum Zeitpunkt des letzten Updates gibt es keine Browserunterstützung.
Mehr Informationen
- CSS Overflow Module Level 4 Arbeitsentwurf
- GitHub-Problem Nr. 92
- Die CSS-Arbeitsgruppe bei TPAC: Was ist neu in CSS? Einschließlich eines handgezeichneten Vorschlags für die Tabelle, in dem das Verhalten der Eigenschaftswerte beschrieben wird.