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 Bildlaufleisten eines Elements festzulegen, wenn sie angezeigt werden.

Der Zweck von scrollbar-width besteht darin, den von der Bildlaufleiste auf einer Seite oder einem Element belegten Platz zu optimieren; der Zweck ist nicht mit der Ästhetik der Bildlaufleiste verbunden. Die vordefinierten Schlüsselwortwerte von scrollbar-width geben dem Benutzeragenten an, ob eine normale oder kleinere Bildlaufleiste gerendert werden soll. Vermeiden Sie die Verwendung von none, da das Ausblenden einer Bildlaufleiste sich negativ auf die Zugänglichkeit auswirkt.

Hinweis: Für Elemente, die nur über programmatische Mittel und nicht durch direkte Benutzerinteraktion scrollbar sind, verwenden Sie die overflow-Eigenschaft mit einem Wert von hidden anstelle von scrollbar-width: none.

Syntax

css

/* 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 Bildlaufleistenbreite für die Plattform.
thin: Eine dünne Bildlaufleistenbreitenvariante auf Plattformen, die diese Option bieten, oder eine dünnere Bildlaufleiste als die standardmäßige Bildlaufleistenbreite der Plattform.
none: Keine Bildlaufleiste wird angezeigt, das Element bleibt jedoch scrollbar.

Hinweis: Benutzeragenten müssen jeden auf das Wurzelelement angewandten 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 es schwierig oder unmöglich machen, Inhalte zu scrollen, wenn der Autor keine alternative Scrollmethode 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) gibt es schon lange, um auf grundlegende Tastaturzugänglichkeit hinzuweisen, und dies sollte auch das Scrollen von Inhaltsbereichen umfassen. Im WCAG 2.1 eingeführt, empfiehlt das Kriterium 2.5.5 (Zielgröße), dass Berührungsziele mindestens 44px breit und hoch sein sollten (obwohl das Problem auf hochauflösenden Bildschirmen verschärft wird; gründliches Testen wird 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-Bildlaufleisten

CSS

css

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

HTML

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