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 ermöglicht es dem Autor, die gewünschte Dicke der Scrollleisten eines Elements festzulegen, wenn diese angezeigt werden.
Der Zweck von scrollbar-width besteht darin, den von der Scrollleiste auf einer Seite oder einem Element belegten Platz zu optimieren; es geht nicht um die Ästhetik der Scrollleiste. Die vordefinierten Schlüsselwortwerte von scrollbar-width weisen den Benutzeragenten an, ob eine normale oder kleinere Scrollleiste gerendert werden soll. Vermeiden Sie die Verwendung von none, da das Ausblenden einer Scrollleiste die Barrierefreiheit negativ beeinflusst.
Hinweis:
Für Elemente, die nur über programmatische Mittel und nicht durch direkte Benutzerinteraktion scrollbar sind, 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 Standardbreite der Plattform.
none-
Keine Scrollleiste wird angezeigt, das Element bleibt jedoch scrollbar.
Hinweis:
Benutzeragenten müssen jeden auf dem Wurzelelement gesetzten scrollbar-width-Wert auf den Ansichtsbereich anwenden.
Barrierefreiheit
Verwenden Sie diese Eigenschaft mit Vorsicht — die Einstellung von scrollbar-width auf thin oder none kann Inhalte nur schwer oder unmöglich scrollbar machen, 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 in Kraft, um auf die grundlegende Tastaturzugänglichkeit hinzuweisen, und dies sollte das Scrollen von Inhaltsbereichen einschließen. In WCAG 2.1 eingeführt, rät Kriterium 2.5.5 (Zielgröße), dass Touch-Ziele mindestens 44px in Breite und Höhe haben sollten (obwohl das Problem auf hochauflösenden Bildschirmen verstärkt 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öße 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 |