scrollbar-width CSS property
Baseline
2024
Neu verfügbar
Seit Dezember 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die scrollbar-width-Eigenschaft ermöglicht 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 ist nicht ästhetischer Natur. Die vordefinierten Schlüsselwortwerte von scrollbar-width geben dem Benutzeragenten an, ob eine normale oder kleinere Scrollleiste gerendert werden soll. Vermeiden Sie die Verwendung von none, da das Ausblenden einer Scrollleiste die Zugänglichkeit beeinträchtigt.
Hinweis:
Für Elemente, die nur programmatisch und nicht durch direkte Benutzerinteraktion scrollbar sind, verwenden Sie die overflow-Eigenschaft mit einem Wert von hidden anstelle von scrollbar-width: none.
Hinweis:
Browser ignorieren die nicht-standardmäßige ::-webkit-scrollbar-Familie von Pseudoelementen bei jedem Element, dessen berechneter scrollbar-width-Wert etwas anderes als auto ist.
Im Gegensatz zu scrollbar-color wird scrollbar-width nicht vererbt, sodass der Wert eines Vorfahren seine Nachkommen nicht beeinflusst.
Wenn Sie scrollbar-width: auto auf ein Element setzen, wird dessen ::-webkit-scrollbar-*-Stil wiederhergestellt.
Siehe Hinzufügen eines Fallbacks für Scrollleistenstile.
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 Scrollleistenvariante auf Plattformen, die diese Option bieten, oder eine dünnere Scrollleiste als die Standardplattform-Scrollleistenbreite.
none-
Keine Scrollleiste wird angezeigt, jedoch bleibt das Element scrollbar.
Hinweis:
Benutzeragenten müssen jeden scrollbar-width-Wert anwenden, der auf das Wurzelelement gesetzt ist, auf den Viewport.
Zugänglichkeit
Verwenden Sie diese Eigenschaft mit Vorsicht – das Setzen von scrollbar-width auf thin oder none kann es schwierig oder unmöglich machen, Inhalte zu scrollen, wenn der Autor keinen alternativen Scrollmechanismus bereitstellt. Während Wischgesten oder Mausräder das Scrollen solcher Inhalte ermöglichen können, haben einige Geräte keine alternative Scrollmöglichkeit.
Das WCAG-Kriterium 2.1.1 (Tastatur) ist seit langem vorhanden, um die grundlegende Tastaturzugänglichkeit zu fördern, und dies sollte auch das Scrollen von Inhaltsbereichen umfassen. Mit der Einführung von WCAG 2.1 rät das Kriterium 2.5.5 (Zielgröße), dass Touch-Ziele mindestens 44px in Breite und Höhe haben sollten (obwohl das Problem bei hochauflösenden Bildschirmen verstärkt wird; umfassende 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
| Spezifikation |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |