scrollbar-width
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-width-Eigenschaft erlaubt es dem Autor, die gewünschte Dicke der Scrollleisten eines Elements festzulegen, wenn diese angezeigt werden.
Der Zweck der scrollbar-width-Eigenschaft besteht darin, den Platz zu optimieren, den die Scrollleiste auf einer Seite oder einem Element einnimmt; Der Zweck bezieht sich nicht auf das Aussehen der Scrollleiste. Die vordefinierten Schlüsselwortwerte von scrollbar-width zeigen dem Benutzeragent an, ob eine normale oder eine kleinere Scrollleiste gerendert werden soll. Vermeiden Sie die Verwendung von none, da das Verbergen einer Scrollleiste die Zugänglichkeit negativ beeinflusst.
Hinweis:
Für Elemente, die nur programmatisch und nicht durch direkte Benutzerinteraktion gescrollt werden können, verwenden Sie die overflow-Eigenschaft mit dem Wert hidden anstelle von scrollbar-width: none.
Syntax
/* Keyword values */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
/* Global values */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;
Werte
auto-
Die Standardbreite der Scrollleiste für die Plattform.
thin-
Eine dünne Variante der Scrollleistenbreite auf Plattformen, die diese Option bieten, oder eine dünnere Scrollleiste als die Standardplattformbreite.
none-
Keine Scrollleiste wird angezeigt, das Element bleibt jedoch scrollbar.
Hinweis:
Benutzeragenten müssen jeden auf dem Stamm-Element festgelegten scrollbar-width-Wert auf das Ansichtsfenster anwenden.
Zugänglichkeit
Verwenden Sie diese Eigenschaft mit Vorsicht — das Setzen von scrollbar-width auf thin oder none kann das Scrollen des Inhalts erschweren oder unmöglich machen, wenn der Autor keinen alternativen Scrollmechanismus bereitstellt. Während Wischgesten oder Mausräder das Scrollen bei solchen Inhalten ermöglichen können, haben manche Geräte keine alternative Scrollmöglichkeit.
Das WCAG-Kriterium 2.1.1 (Tastatur) besteht seit langem, um grundlegende Tastaturzugänglichkeit zu empfehlen, wozu auch das Scrollen von Inhaltsbereichen gehört. Und eingeführt in WCAG 2.1, empfiehlt das Kriterium 2.5.5 (Zielgröße), dass Berührungsziele mindestens 44px in Breite und Höhe haben sollten (obwohl das Problem auf Bildschirmen mit hoher Auflösung verschärft wird; gründliche Tests werden empfohlen).
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | scrollende Boxen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
scrollbar-width =
auto |
thin |
none
Beispiele
Größenanpassung von Überlauf-Scrollleisten
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-width: thin;
}
HTML
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |
Browser-Kompatibilität
Loading…