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.
Mit der Eigenschaft scrollbar-width können Autoren die gewünschte Breite der Scrollleisten eines Elements festlegen, wenn diese angezeigt werden.
scrollbar-width dient dazu, den Platzbedarf der Scrollleiste auf einer Seite oder in einem Element zu optimieren, nicht dazu, ihr Aussehen zu gestalten. Die vordefinierten Schlüsselwortwerte von scrollbar-width geben dem User Agent vor, ob eine normale oder eine schmalere Scrollleiste dargestellt werden soll. Vermeiden Sie none, da das Ausblenden einer Scrollleiste die Barrierefreiheit beeinträchtigt.
Hinweis:
Verwenden Sie für Elemente, die nur programmgesteuert und nicht durch direkte Benutzerinteraktion gescrollt werden können, die Eigenschaft overflow mit dem Wert hidden statt scrollbar-width: none.
Hinweis:
Browser ignorieren die nicht standardisierte Pseudoelement-Familie ::-webkit-scrollbar bei jedem Element, dessen berechneter scrollbar-width-Wert nicht auto ist.
Anders als scrollbar-color wird scrollbar-width nicht vererbt; der Wert eines Vorfahren wirkt sich daher nicht auf seine Nachfahren aus.
Wenn Sie für ein Element scrollbar-width: auto festlegen, wird dessen ::-webkit-scrollbar-*-Styling wiederhergestellt.
Siehe Fallback für Scrollleisten-Stile hinzufügen.
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 Scrollleistenbreite der Plattform.
thin-
Eine schmale Variante der Scrollleistenbreite auf Plattformen, die diese Option anbieten, oder eine Scrollleiste, die schmaler ist als die standardmäßige Scrollleiste der Plattform.
none-
Es wird keine Scrollleiste angezeigt; das Element bleibt jedoch scrollbar.
Hinweis:
User Agents müssen jeden auf dem Wurzelelement festgelegten scrollbar-width-Wert auf den Viewport anwenden.
Barrierefreiheit
Verwenden Sie diese Eigenschaft mit Vorsicht: Wenn scrollbar-width auf thin oder none gesetzt wird, können Inhalte schwer oder gar nicht scrollbar sein, sofern kein alternativer Scrollmechanismus bereitgestellt wird. Wischgesten oder Mausräder können das Scrollen solcher Inhalte ermöglichen, doch auf manchen Geräten gibt es keine alternative Möglichkeit zum Scrollen.
Das WCAG-Kriterium 2.1.1 (Tastatur) enthält seit Langem Anforderungen an die grundlegende Zugänglichkeit per Tastatur. Dazu sollte auch das Scrollen von Inhaltsbereichen gehören. Das mit WCAG 2.1 eingeführte Kriterium 2.5.5 (Zielgröße) empfiehlt, dass Touch-Ziele mindestens 44px breit und hoch sein sollten. Auf hochauflösenden Bildschirmen verschärft sich das Problem; gründliches Testen ist daher ratsam.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | scrollende Boxen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
scrollbar-width =
auto |
thin |
none
Beispiele
Breite von Scrollleisten bei überlaufendem Inhalt festlegen
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>
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-width: thin;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |