Scrollbars

Scrollbars sind Bedienelemente des Browsers. Mit CSS lassen sich ihre Breite und Farbe anpassen. Wie sie genau aussehen, hängt trotzdem vom Browser, Betriebssystem und den persönlichen Systemeinstellungen ab.

Die Eigenschaften werden auf das Element gesetzt, das gescrollt wird. Mit html können sie auf die Scrollbar der ganzen Seite angewendet werden.

Properties im Überblick

  • scrollbar-widthbestimmt die Breite der Scrollbar
  • scrollbar-colordefiniert die Farben von Schieber und Hintergrund
  • scrollbar-gutterreserviert Platz für eine Scrollbar
  • ::-webkit-scrollbarermöglicht zusätzliche, nicht standardisierte Gestaltung

1. scrollbar-width

scrollbar-width legt fest, ob der Browser eine normale, schmale oder keine sichtbare Scrollbar zeichnet. Die konkrete Breite wird vom Browser und Betriebssystem bestimmt.

  • auto – Standardbreite des Browsers
  • thin – schmalere Scrollbar
  • none – Scrollbar ausblenden; der Inhalt bleibt scrollbar
.container {
    scrollbar-width: thin;
}

Wichtig: Verwende none nur, wenn das Scrollen weiterhin klar erkennbar und mit Maus, Touch und Tastatur möglich ist.

2. scrollbar-color

scrollbar-color erhält entweder den Wert auto oder zwei Farben. Die erste Farbe gilt für den beweglichen Schieber, die zweite für den Hintergrund.

  • auto – Der Browser bestimmt die Farben.
  • <color> <color> – Erste Farbe: Thumb, zweite Farbe: Track
  • CSS-Farbwerte wie Hex, RGB, OKLCH oder transparent sind erlaubt.
  • Verläufe und Bilder sind nicht erlaubt.
.container {
    scrollbar-color: deeppink antiquewhite;
}

Standard Scrollbar

Das Beispiel kombiniert die standardisierten Eigenschaften scrollbar-width und scrollbar-color.

Scroll nach unten

Die Scrollbar ist schmal. Der bewegliche Schieber ist pink, der Hintergrund ist hell.

Mehr Inhalt erzeugt Overflow und macht diesen Bereich scrollbar. Das Aussehen der Scrollbar kann je nach Browser und Betriebssystem unterschiedlich sein.

Die Scrollbar bleibt ein Bedienelement des Browsers.

.demo-scrollbar {
    height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: deeppink antiquewhite;
}

3. scrollbar-gutter

Wenn eine klassische Scrollbar erscheint, benötigt sie Platz und kann den Inhalt verschieben. Mit scrollbar-gutter lässt sich dieser Platz im Voraus reservieren.

  • auto – Der Browser reserviert nur dann Platz, wenn er benötigt wird. Das ist der Standard.
  • stable – Platz für die Scrollbar bleibt reserviert.
  • stable both-edges – Platz wird an beiden Seiten reserviert, damit der Inhalt symmetrisch bleibt.
.container {
    overflow: auto;
    scrollbar-gutter: stable;
}

Hinweis: Bei Overlay-Scrollbars ist der Effekt möglicherweise nicht sichtbar, weil diese über dem Inhalt liegen und keinen eigenen Platz benötigen.

WebKit-Pseudoelemente

Chromium-basierte Browser und Safari unterstützen zusätzliche Pseudoelemente mit dem Präfix ::-webkit-. Damit lassen sich einzelne Bestandteile der Scrollbar gestalten. Diese Schreibweisen sind nicht standardisiert und können sich je nach Browser unterschiedlich verhalten.

  • ::-webkit-scrollbar – gesamte Scrollbar
  • ::-webkit-scrollbar-track – Hintergrund der Scrollbar
  • ::-webkit-scrollbar-thumb – beweglicher Schieber
  • ::-webkit-scrollbar-button – Schaltflächen der Scrollbar, sofern vorhanden
  • ::-webkit-scrollbar-corner – Ecke zwischen horizontaler und vertikaler Scrollbar

Werden auf demselben Element standardisierte Werte für scrollbar-color oder scrollbar-width verwendet, können diese die WebKit-Gestaltung überschreiben.

Scrollbar mit Verlauf

Mit den WebKit-Pseudoelementen sind Verläufe, Rahmen und Hover-Effekte möglich.

Scroll nach unten

Der Schieber erhält einen Verlauf von Pink zu Indigo.

Diese Gestaltung funktioniert nicht in allen Browsern gleich, weil die verwendeten Pseudoelemente nicht Teil des CSS-Standards sind.

Der Inhalt ist lang genug, damit die Scrollbar sichtbar wird.

.element::-webkit-scrollbar {
    width: 12px;
}

.element::-webkit-scrollbar-track {
    background: antiquewhite;
}

.element::-webkit-scrollbar-thumb {
    border: 2px solid antiquewhite;
    background: linear-gradient(to bottom, deeppink, indigo);
}

.element::-webkit-scrollbar-thumb:hover {
    background: deeppink;
}

Accessibility

  • Schieber und Hintergrund brauchen genügend Kontrast.
  • Sehr schmale Scrollbars sind mit der Maus schwieriger zu bedienen.
  • Eine ausgeblendete Scrollbar darf nicht die einzige Information sein, dass ein Bereich scrollbar ist.
  • Teste das Scrollen mit Maus, Trackpad, Touch und Tastatur.

Kurz gesagt

  • scrollbar-width steuert die Breite der Scrollbar.
  • scrollbar-color definiert die Farbe von Thumb und Track.
  • scrollbar-gutter verhindert Layoutverschiebungen durch klassische Scrollbars.
  • WebKit-Pseudoelemente bieten mehr Gestaltungsmöglichkeiten, sind aber nicht standardisiert.
  • Browser, Betriebssystem und Systemeinstellungen beeinflussen das Ergebnis.

Nurse Wie ein eigener Scroll-Container entsteht, zeigt CSS Overflow.