scrollbar-width CSS property
Baseline
2024
Neu verfügbar
Seit December 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 Scrollbars eines Elements festzulegen, wenn sie angezeigt werden.
Der Zweck der scrollbar-width-Eigenschaft ist es, den Platzbedarf der Scrollbar auf einer Seite oder einem Element zu optimieren; der Zweck ist nicht auf ästhetische Gesichtspunkte der Scrollbar bezogen. Die vordefinierten Schlüsselwort-Werte von scrollbar-width zeigen dem User Agent an, ob eine normale oder kleinere Scrollbar gerendert werden soll. Verwenden Sie none möglichst nicht, da das Verbergen einer Scrollbar negative Auswirkungen auf die Barrierefreiheit hat.
Hinweis:
Für Elemente, die nur über programmatische Mittel und nicht direkt durch 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 standardmäßige Scrollbar-Dicke für die Plattform.
thin-
Eine dünne Scrollbar-Variante auf Plattformen, die diese Option bieten, oder eine dünnere Scrollbar als die standardmäßige Plattform-Scrollbar-Dicke.
none-
Keine Scrollbar wird angezeigt, das Element ist jedoch weiterhin scrollbar.
Hinweis:
User Agents müssen jeden auf dem Root-Element gesetzten scrollbar-width-Wert auf den Viewport anwenden.
Barrierefreiheit
Verwenden Sie diese Eigenschaft mit Vorsicht — das Setzen der scrollbar-width auf thin oder none kann das Scrollen von Inhalten erschweren oder unmöglich machen, wenn der Autor keine alternative Scrollmöglichkeit bereitstellt. Während Wischgesten oder Mausräder das Scrollen auf solchen Inhalten 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 grundlegende Tastaturzugänglichkeit zu empfehlen, und dies sollte das Scrollen von Inhaltsbereichen einschließen. Mit WCAG 2.1 wurde das Kriterium 2.5.5 (Zielgröße) eingeführt, das empfiehlt, dass Berührungsziele mindestens 44px in Breite und Höhe betragen sollten (obwohl das Problem auf hochauflösenden Bildschirmen 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
Dimensionierung der Überlauf-Scrollbars
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 |