CSS-Scrollbars gestalten: Vollständiger Cross-Browser-Leitfaden

Standard-Scrollbars von Browsern passen optisch nicht immer zum Design einer Website. Für ihre Anpassung gibt es zwei Ansätze: die standardisierten W3C-Eigenschaften scrollbar-width, scrollbar-color und scrollbar-gutter sowie die von Chromium und WebKit unterstützte Pseudo-Element-Familie -webkit-scrollbar. Die W3C-Spezifikation CSS Scrollbars Level 1 wurde im September 2018 veröffentlicht; beide Verfahren werden inzwischen von modernen Browsern weitgehend unterstützt.

Zwei Regelsätze bleiben erforderlich, weil sich die standardisierten Eigenschaften und der -webkit-scrollbar-Ansatz zwar überschneiden, aber nicht dieselben Funktionen bieten. Aktuelle Angaben zur Kompatibilität sind unter caniuse.com/css-scrollbar verfügbar.

Dieser Leitfaden erklärt beide Methoden, zeigt Gemeinsamkeiten und Unterschiede und enthält direkt einsetzbare Muster für typische UI-Komponenten wie Chatfenster, Seitenleisten, Codeblöcke und Modalfenster.

Wichtige Erkenntnisse

• Die standardisierten Eigenschaften von CSS Scrollbars Level 1 (scrollbar-width, scrollbar-color, scrollbar-gutter) entsprechen dem vom W3C spezifizierten Ansatz und werden von Chrome 121+, Firefox 64+, Edge 121+ sowie aktuellen Safari-Versionen unterstützt.
• Der Ansatz mit -webkit-scrollbar-Pseudoelementen ist weiterhin erforderlich, um abgerundete Scrollbar-Regler, benutzerdefinierte Track-Farben und randbasierte Innenabstände in Chrome, Safari und Chromium-basiertem Edge umzusetzen.
• Firefox unterstützt keine -webkit-scrollbar-Pseudoelemente. Verwenden Sie für Firefox scrollbar-width und scrollbar-color.
• Verwenden Sie @supports (scrollbar-color: auto), um die Unterstützung der standardisierten Eigenschaften zu erkennen, und grenzen Sie die jeweiligen Blöcke bei Bedarf explizit voneinander ab.
• scrollbar-gutter: stable verhindert Layoutverschiebungen, wenn eine Scrollbar erscheint oder verschwindet, indem der dafür benötigte Platz bereits im Voraus reserviert wird.
• Die Farbe des Scrollbar-Reglers benötigt gegenüber der Track-Farbe ein Kontrastverhältnis von mindestens 3:1, um die Anforderungen von WCAG 2.1 Non-text Contrast zu erfüllen.

Voraussetzungen

Für diesen Leitfaden sollten folgende Grundlagen bekannt sein:

• Grundlegende Kenntnisse im Umgang mit Vendor-Präfixen
• Verständnis von Pseudoelementen
• Kenntnisse über Graceful-Degradation-Techniken

Browser-Kompatibilität

† Die Unterstützung der Standard-Scrollbar-Eigenschaften durch Safari erreichte im Dezember 2024 den Status „neu verfügbar“ in der Baseline. Überprüfen Sie das aktuelle Verhalten vor der Veröffentlichung auf caniuse.com/css-scrollbar, da die Implementierungshinweise noch aktualisiert werden.

Die standardisierten Eigenschaften funktionieren inzwischen in allen großen Browser-Engines. Für border-radius, individuelle Track-Stile oder einen über Rahmen erzeugten Innenabstand am Scrollbar-Griff bleibt die ::-webkit-scrollbar-Familie in Chromium- und WebKit-Browsern weiterhin notwendig.

Die standardisierte CSS-Scrollbars-Spezifikation

CSS Scrollbars Level 1 definiert drei Eigenschaften für die Gestaltung von Scrollbars: scrollbar-width, scrollbar-color und scrollbar-gutter. Sie werden von Chrome 121+, Edge 121+, Firefox 64+ und aktuellen Safari-Versionen unterstützt.

scrollbar-width

scrollbar-width bestimmt die dargestellte Größe der Scrollbar. Unterstützte Werte sind auto, thin und none.

/* scrollbar-width: controls rendered size of the scrollbar */
/* Chrome 121+, Edge 121+, Firefox 64+, Safari - see compatibility table */
.scroll-area {
  scrollbar-width: thin; /* auto | thin | none */
  overflow: auto;
}

thin erzeugt eine schmalere Scrollbar als die Standardeinstellung der jeweiligen Plattform. Die genaue Breite wird vom Browser und Betriebssystem festgelegt und kann sich je nach Umgebung unterscheiden. auto behält die native Größe der Plattform bei. none blendet die sichtbare Scrollbar aus, während das Scrollen weiterhin möglich bleibt. Mit der standardisierten Eigenschaft lässt sich keine exakte Pixelbreite festlegen. Dafür müssen Sie ::-webkit-scrollbar { width } verwenden, was ausschließlich von Chromium und WebKit unterstützt wird.

Browser legen außerdem eine Mindesthöhe für den Scrollbar-Regler fest, damit dieser unabhängig von der Inhaltslänge gut greifbar bleibt. In Chrome liegt diese Untergrenze bei ungefähr 32px, in Firefox bei etwa 18px. Bei einer sehr schmalen Scrollbar auf einer sehr langen Seite wird der Regler ab diesem Punkt nicht weiter verkleinert.

scrollbar-color

scrollbar-color definiert die Farben von Griff und Track mit zwei Werten. Der erste Wert steuert den Griff, der zweite den Track. border-radius und Innenabstände lassen sich mit dieser Eigenschaft nicht festlegen.

/* scrollbar-color: sets thumb and track colors */
/* see compatibility table */
.scroll-area {
  height: 200px;
  overflow: auto;
  scrollbar-color: blue orange; /* thumb track */
}

scrollbar-gutter

Ein Container, der dynamisch Inhalte erhält – beispielsweise ein Chat-Feed, eine Kommentarliste oder ein Filter-Dropdown – kann seinen Inhalt seitlich verschieben, sobald eine Scrollbar erscheint. scrollbar-gutter: stable verhindert diese Bewegung, indem der benötigte Platz bereits reserviert wird, bevor die Scrollbar dargestellt wird.

Die Variante stable both-edges reserviert auf beiden Seiten gleich viel Platz. Dadurch bleibt das Layout in Containern, bei denen eine visuelle Symmetrie wichtig ist – etwa in einem Kartenraster oder einem zentrierten Dialog – optisch besser ausgerichtet.

Unterstützte Werte sind auto, stable und stable both-edges.

/* scrollbar-gutter: reserves space for the scrollbar to prevent layout shift */
/* Chrome 94+, Edge 94+, Firefox 97+, Safari - see compatibility table */
.scroll-area {
  scrollbar-gutter: stable;
  overflow: auto;
}

Styling Scrollbars in Chrome, Edge, and Safari

In Chrome, Edge und Safari können Scrollbars über die mit Vendor-Präfix versehenen -webkit-scrollbar-Pseudo-Elemente angepasst werden. Das folgende Beispiel verwendet die drei am häufigsten eingesetzten Pseudo-Elemente:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Der Rahmen von ::-webkit-scrollbar-thumb verwendet dieselbe Farbe wie der Track. Dadurch wirkt der Scrollbar-Regler optisch eingerückt und es entsteht ein Padding-Effekt. Wenn Sie die Track-Farbe ändern, sollten Sie daher auch die Rahmenfarbe des Reglers entsprechend anpassen. Andernfalls geht dieser Einrückungseffekt verloren und der Rahmen wird als sichtbarer Ring um den Regler dargestellt.

Dieser Code funktioniert in aktuellen Versionen von Chrome, Edge und Safari. Die -webkit-scrollbar-Pseudoelemente sind jedoch nicht standardisiert und gehören nicht zum W3C-Standardisierungsprozess. Die Eigenschaften aus CSS Scrollbars Level 1 (scrollbar-width, scrollbar-color, scrollbar-gutter) entsprechen dem vom W3C standardisierten Ansatz und stellen die bevorzugte, standardbasierte Lösung dar. Beide Ansätze können mithilfe von Feature Queries innerhalb desselben Stylesheets verwendet werden.

Zur Übersicht ist die vollständige Pseudo-Element-Familie nachfolgend aufgeführt:

Das Ausblenden der Pfeiltasten an beiden Enden und die Gestaltung der Ecken der Bildlaufleiste sind häufige Anforderungen, die mit ::-webkit-scrollbar allein nicht erfüllt werden können:

/* Hide arrow buttons at each end of the scrollbar */
/* Chrome, Safari, Edge (Chromium) */
::-webkit-scrollbar-button {
  display: none;
}
/* Style the corner where both scrollbars meet */
/* Chrome, Safari, Edge (Chromium) */
.code-block::-webkit-scrollbar-corner {
  background: #1a1a1a;
}

Hover- und Active-Zustände des Scrollbar-Griffs

Um dem Scrollbar-Regler interaktives Feedback zu geben, können Sie ::-webkit-scrollbar-thumb:hover und ::-webkit-scrollbar-thumb:active formatieren. Die standardisierte Eigenschaft scrollbar-color bietet keine entsprechenden Hover- oder Active-Zustände. Diese Verfeinerung steht daher ausschließlich in Chromium- und WebKit-basierten Browsern zur Verfügung.

/* Thumb darkens on hover - Chrome, Safari, Edge (Chromium) only */
.scroll-area::-webkit-scrollbar-thumb {
  background-color: #888;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
.scroll-area::-webkit-scrollbar-thumb:active {
  background-color: #333;
}

Zukunftssichere Scrollbar-Stile erstellen

Ein einzelnes Stylesheet kann beide Browser-Engine-Familien unterstützen. Jeder Browser ignoriert Regeln für Selektoren, die er nicht implementiert, ohne eine Fehlermeldung auszugeben. Daher genügt es, die standardisierten Eigenschaften und die WebKit-pseudo-elemente in zwei aufeinanderfolgenden Blöcken zu definieren:

/* Standard properties: Chrome 121+, Edge 121+, Firefox 64+ */
body {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
/* Webkit pseudo-elements: Chrome, Edge, Safari */
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: orange;
}
body::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Verwenden Sie für Scrollbar-Regeln nicht den universellen Selektor *, da dieser jedes Element auf der Seite betrifft – einschließlich verschachtelter Scroll-Container, die Sie möglicherweise nicht anpassen möchten. Beschränken Sie die Regeln für ein seitenweites Styling auf body oder verwenden Sie für einzelne Komponenten eine spezifische Klasse.

Blink- und WebKit-basierte Browser ignorieren Regeln, die sie nicht erkennen, und wenden stattdessen die -webkit-scrollbar-Regeln an. Firefox ignoriert ebenfalls nicht unterstützte Regeln und verwendet die CSS-Scrollbars-Eigenschaften. Dieser Ansatz mit zwei Blöcken funktioniert daher, weil jeder Browser nicht unterstützte Selektoren überspringt.

In Chromium gilt zusätzlich eine Prioritätsregel: Sobald für ein Element ein ::-webkit-scrollbar-Pseudoelement definiert wurde, verwendet Chromium für dieses Element die WebKit-basierte Scrollbar-Gestaltung anstelle von scrollbar-color und scrollbar-width. Dieses Verhalten gilt in Chromium auf Elementebene und erklärt, warum sich das Zwei-Block-Muster sauber einsetzen lässt: Firefox verwendet die standardisierten Eigenschaften und überspringt die WebKit-Regeln, während Chromium die WebKit-Regeln verwendet und die standardisierten Eigenschaften für dieses Element nicht berücksichtigt.

Wenn eine explizite Abgrenzung erforderlich ist, verwenden Sie @supports-Feature-Queries:

/* Standard properties where supported: Chrome 121+, Edge 121+, Firefox 64+ */
@supports (scrollbar-color: auto) {
  .scroll-area {
    scrollbar-width: thin;
    scrollbar-color: #2563eb #e5e7eb;
  }
}
/* Webkit pseudo-elements where supported: Chrome, Safari, Edge (all Chromium) */
@supports selector(::-webkit-scrollbar) {
  .scroll-area::-webkit-scrollbar {
    width: 10px;
  }
.scroll-area::-webkit-scrollbar-track {
    background: #e5e7eb;
  }
.scroll-area::-webkit-scrollbar-thumb {
    background-color: #2563eb;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
  }
}

Die Variante mit @supports macht die Abgrenzung explizit und verhindert, dass sich Regeln unbeabsichtigt zwischen verschiedenen Browser-Engines überschneiden. Verwenden Sie das einfachere Muster, wenn Sie ausschließlich moderne Browser unterstützen möchten. Setzen Sie @supports ein, wenn Sie eine klare Isolation der jeweiligen Regeln sicherstellen müssen.

Overlay- und klassische Scrollbars

Wenn benutzerdefinierte Scrollbar-Regeln scheinbar keine Wirkung zeigen, verwendet das Betriebssystem möglicherweise Overlay-Scrollbars. Overlay-Scrollbars liegen als halbtransparenter Regler über dem Inhalt, besitzen keinen sichtbaren Track, erscheinen häufig nur während des Scrollens und beanspruchen keinen Platz im Layout. Unter macOS sind Overlay-Scrollbars für die meisten Nutzer standardmäßig aktiviert, während Windows standardmäßig klassische, dauerhaft sichtbare Scrollbars verwendet.

Im Overlay-Modus führen scrollbar-color und WebKit-basierte Track-Styles häufig zu keinem sichtbaren Ergebnis, da der Track nicht gerendert wird und das Erscheinungsbild des Reglers vom Betriebssystem gesteuert wird. Dies ist ein häufiger Grund für Meldungen wie „Warum hat mein Styling in Safari unter macOS keine Wirkung?“ und hängt mit den noch offenen Fragen zum Verhalten von scrollbar-color in Safari auf aktuellen macOS-Versionen zusammen.

Eine hilfreiche Unterscheidung ist folgende: Klassische Scrollbars, wie sie unter Windows oder unter macOS mit der Systemeinstellung „Scrollbars immer anzeigen“ verwendet werden, können sowohl auf die standardisierten Eigenschaften als auch auf die WebKit-Pseudoelemente reagieren. Overlay-Scrollbars tun dies in der Regel nicht.

Testen Sie daher vor der Veröffentlichung beide Scrollbar-Modi und gehen Sie nicht davon aus, dass das benutzerdefinierte Erscheinungsbild für jeden Nutzer auf jeder Plattform sichtbar ist.

Verhalten auf Mobilgeräten und Touch-Geräten

Benutzerdefiniertes Scrollbar-Styling wirkt sich hauptsächlich auf Desktop-Umgebungen aus. Unter iOS verwendet Safari beim Scrollen per Touch momentum-basierte Overlay-Scrollbars und wendet darauf kein -webkit-scrollbar-Styling an. Unter Android ist die Scrollbar-Unterstützung in Chrome unvollständig und kann sich je nach Version unterscheiden. In beiden Fällen fällt eine gestaltete Scrollbar ohne Fehlermeldung auf die plattformeigene Standarddarstellung zurück.

Verwenden Sie eine benutzerdefinierte Scrollbar daher nicht als einzigen Navigationshinweis für Touch-Nutzer. Wenn eine Komponente aus Gründen der Bedienbarkeit darauf angewiesen ist, dass ein scrollbarer Bereich visuell erkennbar bleibt, sollte am Rand des Scroll-Containers ein zusätzlicher visueller Hinweis eingesetzt werden, beispielsweise ein Fade-Gradient.

/* Touch-friendly cue: fade the bottom edge to hint at more content */
.scroll-container {
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
          mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
}

Dark-Mode-Theming mit benutzerdefinierten Eigenschaften

Speichern Sie die Scrollbar-Farben in CSS Custom Properties und wechseln Sie diese über eine prefers-color-scheme: dark-Media-Query. Dadurch werden die Farbwerte zentral verwaltet und die Scrollbar passt sich automatisch an das jeweils aktive Farbschema an.

/* Theme scrollbar colors once, swap them for dark mode */
:root {
  --sb-thumb: #888;
  --sb-track: #f0f0f0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sb-thumb: #555;
    --sb-track: #1e1e1e;
  }
}
.scroll-area {
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
}
.scroll-area::-webkit-scrollbar-track {
  background: var(--sb-track);
}

Scrollbar ausblenden und Scrollfunktion beibehalten

Wenn eine Scrollbar ausgeblendet werden soll, ohne die Scrollfunktion zu deaktivieren, unterscheidet sich die Umsetzung je nach Browser.

Scrollbar in Chrome und Safari ausblenden

/* Hide scrollbar in Chrome, Safari, and Chromium-based Edge */
/* Scroll functionality is preserved */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

Scrollbar in Firefox ausblenden

/* Hide scrollbar in Firefox */
/* Scroll functionality is preserved */
.hide-scrollbar {
  scrollbar-width: none;
}

Browserübergreifendes Muster zum Ausblenden einer Scrollbar

/* Cross-browser: hide scrollbar while preserving scroll */
/* Apply overflow: auto or scroll to the same element */
.hide-scrollbar {
  overflow: auto;
  scrollbar-width: none;      /* Firefox and standard */
  -ms-overflow-style: none;   /* IE and pre-Chromium Edge (legacy) */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Edge (Chromium) */
}

Entfernen Sie sichtbare Scrollbars nicht aus Bereichen, die für die Navigation auf sie angewiesen sind, sofern das betreffende Element nicht per Tastatur bedienbar ist – also den Fokus erhalten kann und sich mit den Pfeiltasten oder mit Page Up/Page Down scrollen lässt. Weitere Hinweise zu den WCAG-Anforderungen finden Sie im Abschnitt Accessibility Considerations.

Vertikale Scrollbar mit CSS gestalten

Sowohl die standardisierten Eigenschaften als auch die WebKit-Pseudoelemente verwenden bei vertikalen Scrollbars die Breitenachse. Setzen Sie auf dem Container overflow-y: auto, um vertikales Scrollen zu aktivieren. Anschließend können Sie die Scrollbar mit scrollbar-width und scrollbar-color browserübergreifend gestalten und zusätzlich ::-webkit-scrollbar { width } verwenden, um die Breite in Chromium- und WebKit-basierten Browsern präzise festzulegen.

Breite und Farbe einer vertikalen Scrollbar

/* Vertical scrollbar: standard properties */
/* Chrome 121+, Edge 121+, Firefox 64+, Safari - see compatibility table */
.vertical-scroll {
  overflow-y: auto;
  height: 300px;
  scrollbar-width: thin;
  scrollbar-color: #555 #f0f0f0;
}
/* Vertical scrollbar: webkit pseudo-elements */
/* Chrome, Safari, Edge (Chromium) */
.vertical-scroll::-webkit-scrollbar {
  width: 8px;
}
.vertical-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.vertical-scroll::-webkit-scrollbar-thumb {
  background-color: #555;
}

Beispiel für einen abgerundeten Scrollbar-Griff

border-radius für den Scrollbar-Regler hängt vom Pseudoelement ::-webkit-scrollbar-thumb ab. Über die standardisierte Eigenschaft scrollbar-color kann keine Abrundung festgelegt werden.

/* Rounded thumb: Chrome, Safari, Edge (Chromium) only */
.rounded-scroll::-webkit-scrollbar {
  width: 8px;
}
.rounded-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}
.rounded-scroll::-webkit-scrollbar-thumb {
  background-color: #0a84ff;
  border-radius: 20px;
  border: 2px solid #f0f0f0; /* border matches track to create visual padding */
}

Der Scrollbar-Regler unterstützt jeden gültigen CSS-background-Wert, einschließlich Farbverläufen. Da CSS einen Verlauf als Bild behandelt, müssen Sie ihn mit background oder background-image definieren und nicht mit background-color.

Beispielsweise erzeugt background: linear-gradient(to bottom, #0a84ff, #0055cc) in Chromium- und WebKit-basierten Browsern einen Scrollbar-Regler mit Farbverlauf.

Horizontale Scrollbar mit CSS gestalten

Beim Pseudoelement -webkit-scrollbar wird die horizontale Scrollbar über height gesteuert, nicht über width. width legt die Breite der vertikalen Scrollbar fest.

/* Horizontal scrollbar: standard properties */
/* Chrome 121+, Edge 121+, Firefox 64+, Safari - see compatibility table */
.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #0a84ff #e0e0e0;
}
/* Horizontal scrollbar: webkit pseudo-elements */
/* Chrome, Safari, Edge (Chromium) */
/* Use height, not width, for the horizontal bar */
.horizontal-scroll::-webkit-scrollbar {
  height: 6px;
}
.horizontal-scroll::-webkit-scrollbar-track {
  background: #e0e0e0;
}
.horizontal-scroll::-webkit-scrollbar-thumb {
  background-color: #0a84ff;
  border-radius: 10px;
}

Praktische Anwendungsfälle

Die folgenden Muster sind auf spezifische Klassen beschränkt, sodass nur der jeweils vorgesehene Container betroffen ist und nicht die gesamte Seite. Jedes Muster enthält sowohl die standardisierten Eigenschaften als auch die WebKit-Pseudoelemente.

Chatfenster oder Nachrichten-Feed

Die Scrollbar eines Chat-Feeds sollte dezent bleiben, bis der Nutzer damit interagiert. Ein transparenter Track sorgt dafür, dass die Scrollbar im Ruhezustand optisch unauffällig bleibt. Ein schmaler Scrollbar-Regler, der sich beim Hover abdunkelt, macht das Bedienelement bei Bedarf besser sichtbar.

Der Hover-Zustand erfordert ::-webkit-scrollbar-thumb:hover und wird ausschließlich von Chromium- und WebKit-basierten Browsern unterstützt.

/* Chat window: narrow scrollbar, transparent track, hover darkening */
/* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */
.chat-window {
  height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #b0b0b0 transparent;
}
.chat-window::-webkit-scrollbar {
  width: 6px;
}
.chat-window::-webkit-scrollbar-track {
  background: transparent;
}
.chat-window::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  border-radius: 10px;
}
.chat-window::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* darkens on hover so the bar surfaces on demand */
}

Sidebar-Navigation

Eine Sidebar mit umschaltbarem Light-/Dark-Theme sollte die Scrollbar-Farben in komponentenspezifischen CSS Custom Properties speichern, anstatt fest codierte Hex-Werte zu verwenden. Dadurch genügt eine einzige Theme-Änderung, um auch die Scrollbar anzupassen, ohne die eigentlichen Komponentenregeln bearbeiten zu müssen.

/* Sidebar navigation: dark theme, colors via CSS custom properties */
/* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */
.sidebar {
  --sb-thumb: #555;
  --sb-track: #1e1e1e;
width: 240px;
height: 100vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.sidebar::-webkit-scrollbar {
  width: 5px;
}
.sidebar::-webkit-scrollbar-track {
  background: var(--sb-track);
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: 4px;
}

Code-Editor-Bereich

Codebereiche lassen sich häufig sowohl horizontal als auch vertikal scrollen und werden oft mit einem dunklen Theme dargestellt. Wenn Sie für ::-webkit-scrollbar dieselben Werte für width und height festlegen, bleiben die Scrollbars auf beiden Achsen gleich breit.

Mit ::-webkit-scrollbar-corner können Sie den Bereich gestalten, an dem sich die vertikale und horizontale Scrollbar überschneiden. Ohne diese Regel kann die Ecke in einer dunklen Benutzeroberfläche als weißes Quadrat erscheinen.

/* Code editor block: dark scrollbar on both axes with corner fill */
/* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */
.code-block {
  overflow: auto;
  max-height: 300px;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a #1a1a1a;
}
.code-block::-webkit-scrollbar {
  width: 8px;
  height: 8px; /* height controls the horizontal bar */
}
.code-block::-webkit-scrollbar-track {
  background: #1a1a1a;
}
.code-block::-webkit-scrollbar-thumb {
  background-color: #4a4a4a;
  border-radius: 4px;
  border: 2px solid #1a1a1a; /* border matches track; insets the thumb visually */
}
.code-block::-webkit-scrollbar-corner {
  background: #1a1a1a; /* fills the gap where both bars meet */
}

Modal- oder Dialogfenster

Wenn der Inhalt eines Dialogs die verfügbare Höhe überschreitet, kann eine Scrollbar erscheinen und den Text horizontal verschieben. Mit scrollbar-gutter: stable wird der für die Scrollbar benötigte Platz bereits reserviert, bevor ein Overflow auftritt. Dadurch bleibt das Layout stabil und springt nicht, selbst wenn die Scrollbar noch nicht sichtbar ist.

/* Modal content area: scoped scrollbar, gutter reserved to prevent layout shift */
/* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */
.modal-body {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-gutter: stable; /* reserves gutter so content does not shift on overflow */
  scrollbar-width: thin;
  scrollbar-color: #999 #f5f5f5;
}
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.modal-body::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 6px;
}

Scrollbars abhängig von Bedingungen ein- oder ausblenden

Mit CSS-Media-Queries oder JavaScript können Sie Scrollbars abhängig von bestimmten Bedingungen ein- oder ausblenden. Beispielsweise können Sie Scrollbars auf kleineren Bildschirmen ausblenden, wenn der Inhalt vollständig in den Viewport passt, und sie auf größeren Bildschirmen anzeigen, sobald der Inhalt über den verfügbaren Bereich hinausgeht.

@media (max-width: 768px) {
  body {
    overflow: hidden; /* Disables scrolling entirely on smaller screens - not a scrollbar-hiding technique */
  }
}
@media (min-width: 769px) {
  body {
    overflow: auto; /* Shows the scrollbar on larger screens */
  }
}

Um ausschließlich die sichtbare Scrollbar zu entfernen und das Scrollen weiterhin zu ermöglichen, verwenden Sie das browserübergreifende .hide-scrollbar-Muster aus Hide a Scrollbar While Keeping Scroll Functionality. Wenden Sie diese Klasse am gewünschten Breakpoint auf den Scroll-Container an, sodass die entsprechenden Regeln nur den vorgesehenen Container betreffen.

/* Small viewports: add hide-scrollbar to the element (class rules defined above) */
@media (max-width: 768px) {
  .scroll-container {
    overflow: auto;
  }
}
// Hide the scrollbar only when content does not overflow
const el = document.querySelector('.scroll-container');
el.classList.toggle('hide-scrollbar', el.scrollHeight <= el.clientHeight);

Using CSS Scrollbars with JavaScript Interactions

Die einfachste Möglichkeit, Smooth Scrolling umzusetzen, besteht in der Verwendung von CSS. Dafür ist kein JavaScript erforderlich:

/* Smooth scrolling with CSS only - no JavaScript required */
html {
  scroll-behavior: smooth;
}

Um nach einem Klick sanft zu einem Zielelement zu scrollen:

// Smooth scroll to a target element on click (no library required)
document.getElementById('scroll-to-section').addEventListener('click', () => {
  document.getElementById('target-section').scrollIntoView({ behavior: 'smooth' });
});

Häufige Fehler und Debugging

1. Die Seitenbreite verschiebt sich, sobald eine Scrollbar erscheint

Wenn ein Container zunächst vollständig in den verfügbaren Bereich passt und später durch zusätzliche Inhalte überläuft, erscheint eine klassische Scrollbar. Unter Windows beansprucht diese typischerweise etwa 15 bis 17 px der verfügbaren Layoutbreite. Dadurch wird der Inhaltsbereich schmaler, Text wird neu umgebrochen und das Layout verschiebt sich. Besonders deutlich fällt dies bei Containern auf, die auf die volle Viewport-Breite gesetzt sind, sowie bei dynamisch geladenen Listen, bei denen die Scrollbar erst nach dem initialen Rendering erscheint.

Eine direkte Lösung ist scrollbar-gutter: stable. Diese Eigenschaft reserviert den für die Scrollbar benötigten Platz bereits, bevor sie sichtbar wird. Dadurch bleibt die Breite des Inhaltsbereichs stabil:

CSS ohne reservierten Scrollbar-Bereich (Layout verschiebt sich, sobald die Scrollbar erscheint):

.feed {
  overflow: auto;
  /* no scrollbar-gutter: content reflows when the bar appears */
}

CSS mit reserviertem Scrollbar-Bereich (das Layout bleibt stabil):

.feed {
  overflow: auto;
  scrollbar-gutter: stable; /* reserves gutter; content width does not change */
}

Wenn die Scrollbar unabhängig von der Inhaltslänge immer sichtbar bleiben soll, bietet overflow: scroll eine ähnliche Layoutstabilität, ohne dass scrollbar-gutter erforderlich ist. Der für die Scrollbar benötigte Platz wird dabei dauerhaft reserviert.

2. Scrollbar verschwindet unbeabsichtigt durch overflow: hidden

Wenn eine Scrollbar unerwartet verschwindet, prüfen Sie, ob ein übergeordnetes Element overflow: hidden verwendet. Diese Einstellung deaktiviert das Scrollen bei überlaufendem Inhalt vollständig für das betreffende Element und seine untergeordneten Elemente.

Fehlerhaftes HTML und CSS:

<div style="overflow: hidden;">
  <div style="overflow: auto;">
    <!-- Content that requires a scrollbar -->
  </div>
</div>

Korregiertes HTML and CSS:

<div>
  <div style="overflow: auto;">
    <!-- Content that requires a scrollbar -->
  </div>
</div>

3. Doppelte Scrollbars durch verschachteltes overflow

Doppelte Scrollbars können auftreten, wenn ein scrollbarer Container in einem weiteren scrollbaren Container verschachtelt ist. Dies passiert in der Regel, wenn sowohl für das übergeordnete als auch für das untergeordnete Element overflow: auto oder overflow: scroll festgelegt wurde.

Eine direkte Lösung besteht darin, nur ein einziges Element scrollbar zu machen – typischerweise den inneren Content-Wrapper – und für das übergeordnete Element das standardmäßige Overflow-Verhalten beizubehalten:

Symptom: Verschachteltes Overflow-Verhalten bei übergeordnetem und untergeordnetem Element:

/* Symptom: two scrollbars from nested overflow */
.outer { overflow: auto; }   /* parent scrolls */
.inner { overflow: auto; }   /* child also scrolls: double bars */

Lösung: Scrollen Sie nur innerhalb eines einzigen Elements:

/* Fix: scroll on one element only */
.outer { overflow: visible; }
.inner { overflow: auto; }

Hinweise zur Barrierefreiheit

Anforderungen an den Farbkontrast

WCAG 2.1, Erfolgskriterium 1.4.11 (Non-text Contrast), verlangt ein Kontrastverhältnis von mindestens 3:1 zwischen einer UI-Komponente und den angrenzenden Farben. Bei einer Scrollbar muss die Farbe des Scrollbar-Reglers daher einen Kontrast von mindestens 3:1 gegenüber der Track-Farbe erreichen.

• Regler #767676 auf Track #ffffff: ungefähr 4,5:1. Erfüllt die Anforderung.
• Regler #cccccc auf Track #ffffff: ungefähr 1,6:1. Erfüllt die Anforderung nicht.

Verwenden Sie vor der Veröffentlichung den WebAIM Contrast Checker, um die Farbkombinationen Ihrer Scrollbar zu überprüfen.

Scrollbar-Einstellungen der Nutzer respektieren

Einige Nutzer konfigurieren ihr Betriebssystem so, dass Scrollbars dauerhaft angezeigt werden, oder verwenden Bedienungshilfen, die deren Darstellung beeinflussen. Verwenden Sie CSS nicht, um solche Accessibility-Einstellungen des Betriebssystems zu überschreiben.

Wenn Sie eine Scrollbar mit scrollbar-width: none oder ::-webkit-scrollbar { display: none } ausblenden, stellen Sie sicher, dass das betreffende Element per Tastatur bedienbar bleibt. Es muss fokussierbar sein und auf Pfeiltasten sowie Page Up und Page Down reagieren, damit Nutzer ohne Maus durch den Inhalt navigieren können. Blenden Sie eine Scrollbar nicht aus, wenn sie der einzige sichtbare Navigationshinweis des Elements ist.

FAQ

1. Worin liegt der Unterschied zwischen -webkit-scrollbar und den standardisierten CSS-Scrollbars-Eigenschaften?

Die Methode mit -webkit-scrollbar basiert auf herstellerspezifischen Pseudoelementen, die von Chrome, Safari und Chromium-basiertem Edge unterstützt werden. Sie ermöglicht eine detaillierte Anpassung, beispielsweise mit border-radius für den Scrollbar-Regler oder einem randbasierten Padding-Effekt um den Regler.

Der CSS-Scrollbars-Standard (scrollbar-width, scrollbar-color) entspricht dem vom W3C spezifizierten Ansatz und wird von Firefox sowie neueren Versionen von Chrome und Edge unterstützt. Beide Ansätze können mithilfe von @supports-Feature-Queries innerhalb desselben Stylesheets verwendet werden.

2. Funktioniert CSS-Scrollbar-Styling in Firefox?

Ja. Firefox unterstützt scrollbar-width und scrollbar-color aus der Spezifikation CSS Scrollbars Level 1 seit Version 64. Die -webkit-scrollbar-Pseudoelemente werden von Firefox nicht unterstützt.

Definieren Sie Scrollbar-Styles für Firefox daher ausschließlich mit den standardisierten Eigenschaften.

3. Wie lässt sich eine Scrollbar mit CSS ausblenden, ohne das Scrollen zu deaktivieren?

Setzen Sie overflow: auto auf den Container. Verwenden Sie anschließend ::-webkit-scrollbar { display: none } für Chrome und Safari sowie scrollbar-width: none für Firefox.

Verwenden Sie nicht overflow: hidden, da diese Eigenschaft das Scrollen vollständig deaktiviert, anstatt lediglich die sichtbare Scrollbar auszublenden.

4. Kann border-radius für einen Scrollbar-Griff verwendet werden?

Ja, allerdings nur mit dem Pseudoelement ::-webkit-scrollbar-thumb. Setzen Sie border-radius direkt auf ::-webkit-scrollbar-thumb.

Die standardisierte Eigenschaft scrollbar-color bietet keine Möglichkeit, den Scrollbar-Regler abzurunden.

5. Beeinflusst Scrollbar-Styling das Seitenlayout?

Standardmäßig beanspruchen Scrollbars Platz im Layout. Die Eigenschaft scrollbar-gutter legt fest, ob dieser Platz auch dann reserviert bleibt, wenn die Scrollbar ausgeblendet ist. Mit scrollbar-gutter: stable verhindern Sie, dass sich der Inhalt neu anordnet, wenn eine Scrollbar erscheint oder verschwindet.

6. Sind individuell gestaltete CSS-Scrollbars barrierefrei?

Benutzerdefinierte Scrollbar-Designs müssen die Farbkontrastanforderungen der WCAG 2.1 erfüllen. Zwischen der Farbe des Scrollbar-Reglers und dem Hintergrund des Tracks muss für nicht-textuelle UI-Komponenten ein Kontrastverhältnis von mindestens 3:1 bestehen.

Vermeiden Sie es, Scrollbars bei Elementen vollständig auszublenden, wenn diese für die Navigation erforderlich sind und keine per Tastatur zugängliche Alternative zur Verfügung steht.

7. Funktioniert -webkit-scrollbar in Edge?

Ja. Microsoft Edge verwendet die Chromium-Engine und unterstützt die vollständige Familie der -webkit-scrollbar-Pseudoelemente. CSS, das für Chrome geschrieben wurde, funktioniert daher auch in Edge ohne Änderungen.

8. Wie lässt sich eine individuelle Scrollbar nur auf ein einzelnes Element anwenden?

Beschränken Sie den Pseudoelement-Selektor auf eine bestimmte Klasse oder ID:

/* Scoped custom scrollbar: applies only to .my-container */
.my-container::-webkit-scrollbar {
  width: 8px;
}
.my-container {
  scrollbar-width: thin;
  scrollbar-color: #555 #f0f0f0;
}

Bei den standardisierten Eigenschaften werden scrollbar-width und scrollbar-color direkt am Selektor des gewünschten Elements definiert.

Fazit

Dieser Leitfaden hat erläutert, wie Sie Scrollbars mit den standardisierten Eigenschaften aus CSS Scrollbars Level 1 (scrollbar-width, scrollbar-color, scrollbar-gutter) sowie mit der Familie der -webkit-scrollbar-Pseudoelemente anpassen können. Behandelt wurden die browserübergreifende Kompatibilität, das Muster zur Feature-Erkennung mit @supports, Beispiele für vertikale und horizontale Scrollbars, die geeignete Methode zum Ausblenden einer Scrollbar bei weiterhin aktivierter Scroll-Funktion sowie gezielt abgegrenzte Beispiele für typische Interface-Muster wie Chatfenster, Sidebars, Codeblöcke und Modals.

Sie können nun Scrollbar-Styles für Chrome, Firefox, Safari und Edge erstellen, ohne unnötige Duplikate zu erzeugen. Verwenden Sie @supports für einen standardsbasierten CSS-Ansatz und ergänzen Sie bei Bedarf eine WebKit-Schicht für zusätzliche visuelle Details. Begrenzen Sie benutzerdefinierte Scrollbar-Regeln außerdem auf einzelne Komponenten, statt die gesamte Seite zu gestalten, und wählen Sie Farbkombinationen, die die Kontrastanforderungen der WCAG 2.1 erfüllen.

Für weiterführende Arbeiten mit CSS-Pseudoelementen und Layout-Eigenschaften können Sie A CSS Selector Reference nutzen, um mehr über die in diesem Tutorial verwendeten Selektoren und Pseudoelemente zu erfahren. How To Prevent Line Breaks Using CSS zeigt Methoden, mit denen Inhalte mithilfe von white-space: nowrap in einer Zeile gehalten werden können, was insbesondere bei horizontal scrollbaren Containern hilfreich ist. CSS Flexbox erläutert Layout-Techniken, die sich in Kombination mit scrollbar-gutter einsetzen lassen, um ein erneutes Umfließen von Inhalten zu verhindern.