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 sie angezeigt werden.

Der Zweck von scrollbar-width liegt darin, den von der Scrollleiste auf einer Seite oder einem Element eingenommenen Platz zu optimieren; das Ziel ist nicht mit dem Aussehen der Scrollleiste verbunden. Die vordefinierten Schlüsselwortwerte von scrollbar-width geben dem User-Agent an, ob eine normale oder kleinere Scrollleiste angezeigt werden soll. Vermeiden Sie die Verwendung von none, da das Ausblenden einer Scrollleiste sich negativ auf die Zugänglichkeit auswirkt.

Hinweis: Für Elemente, die nur programmgesteuert und nicht durch direkte Benutzerinteraktion gescrollt werden können, 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 Standardbreite der Scrollleiste für die Plattform.

thin

Eine dünne Scrollleistenvariante auf Plattformen, die diese Option unterstützen, oder eine dünnere Scrollleiste als die Standardplattformbreite.

none

Keine Scrollleiste wird angezeigt, das Element bleibt jedoch scrollbar.

Hinweis: User Agents müssen jeden scrollbar-width Wert, der auf dem Root-Element gesetzt ist, auf den Viewport anwenden.

Zugänglichkeit

Verwenden Sie diese Eigenschaft mit Vorsicht – das Setzen von scrollbar-width auf thin oder none kann das Scrollen von Inhalten erschweren oder unmöglich machen, wenn der Autor keinen alternativen Scroll-Mechanismus bereitstellt. Obwohl Wischgesten oder Mausräder das Scrollen solcher Inhalte ermöglichen können, haben einige Geräte keine alternative Scrolloption.

Das WCAG-Kriterium 2.1.1 (Tastatur) ist seit langem vorhanden, um auf grundlegende Tastaturzugänglichkeit hinzuweisen, und dies sollte das Scrollen von Inhaltsbereichen umfassen. Und eingeführt in WCAG 2.1, rät Kriterium 2.5.5 (Zielgröße), dass Berührungsziele mindestens 44px in Breite und Höhe betragen sollten (obwohl das Problem auf hochauflösenden Bildschirmen verstärkt wird; gründliche Tests werden empfohlen).

Formale Definition

Anfangswertauto
Anwendbar aufscrollende Boxen
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

scrollbar-width = 
  auto  |
  thin  |
  none

Beispiele

Größenanpassung von Überlauf-Scrollleisten

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch