CSS-Scrollbar-Generator

Moderne Standardeigenschaften (ab 2023)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Browser-Unterstützung (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Reserviert den Platz für die Bildlaufleiste auch dann, wenn sie nicht benötigt wird, und verhindert so einen Layout-Sprung.

Webkit-Pseudo-Elemente (Chrome, Safari, ältere Edge-Versionen)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Feinere Kontrolle. width legt die Breite der vertikalen Bildlaufleiste fest, height die Höhe der horizontalen. Fügen Sie beides für Container hinzu, die in beide Richtungen scrollen können.

Die beiden Ansätze abstufen

Geben Sie zuerst die modernen Regeln an, dann Webkit als Erweiterung für Browser, die beide auswerten:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox berücksichtigt nur die modernen scrollbar-*-Regeln. Chrome und Safari berücksichtigen die Webkit-Regeln (die die modernen überschreiben, sodass das Verhalten einheitlich bleibt).

scrollbar-gutter verhindert das Verrutschen von Inhalten

Ohne reservierten Zwischenraum fließt der Inhalt um, sobald eine Bildlaufleiste erscheint (häufig bei dynamischen Listen). Lösung:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

Der Platz für die Bildlaufleiste wird reserviert, unabhängig davon, ob der Inhalt scrollt oder nicht. both-edges fügt auf der gegenüberliegenden Seite einen passenden Zwischenraum hinzu, damit der Inhalt optisch zentriert bleibt.

Bildlaufleisten vollständig ausblenden

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Vorsicht: Wird die Bildlaufleiste ausgeblendet, erkennen Nutzer nicht mehr, dass sich der Inhalt scrollen lässt. Verwenden Sie das nur mit einem klaren Hinweis (Pfeile, Seitenpunkte) oder wenn das Scroll-Verhalten aus dem Kontext offensichtlich ist (horizontale Karussells, Chat-Verläufe).

Hinweise für Mobilgeräte

Unter iOS und Android erscheinen Bildlaufleisten nur kurz während des Scrollens. Ihr eigenes Scrollbar-CSS wird zwar weiterhin angewendet, doch Nutzer sehen es womöglich nie länger als eine Sekunde. Gestalten Sie entsprechend: Investieren Sie nicht zu viel in visuelle Feinheiten, die kaum sichtbar sind.

Barrierefreiheit

• Kontrast: Regler und Spur sollten für Nicht-Text-Kontrast ein Verhältnis von 3:1 erreichen (WCAG 1.4.11).
• Breite: Schmale Bildlaufleisten lassen sich mit der Maus nur schwer greifen, besonders für Nutzer mit motorischen Einschränkungen. Die normale Breite ist der sicherere Standard.
• Entfernen Sie die Bildlaufleiste niemals in scrollbaren Bereichen, ohne eine andere Scroll-Möglichkeit anzubieten. Nutzer, die auf die Bildlaufleiste angewiesen sind, kommen sonst nicht weiter.