Scrollbar-Styling

Mit scrollbar-width und scrollbar-color gestaltest du Scrollbars modern und crossbrowser, ganz ohne Webkit-Präfixe. Die Eigenschaft overscroll-behavior verhindert, dass Scroll-Gesten von Modals oder Sidebars auf die Seite darunter durchschlagen. Zusammen ermöglichen sie saubere, kontrollierte Scroll-Erlebnisse in Overlays, Chat-Fenstern und gefilterten Listen.

Steckbrief scrollbar

Syntax: scrollbar-width: auto | thin | none
Initialwert: auto
Vererbt: Nein
Animierbar: Nein

Kategorie: Interaktion
Werte: 8
Beispiele: 12
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.07.2026

Grundlagen

scrollbar-width, scrollbar-color und overscroll-behavior sind die drei Standard-Eigenschaften für modernes Scrollbar-Styling. Sie funktionieren in allen modernen Browsern und ersetzen die alten, Webkit-spezifischen Pseudo-Elemente.

scrollbar-width macht Scrollbars schmaler oder blendet sie aus. scrollbar-color färbt Thumb (Griff) und Track (Schiene) passend zum Design. overscroll-behavior steuert, ob Scroll-Gesten an darunterliegende Elemente weitergegeben werden. Besonders wichtig ist das für Modals und Sidebars, damit das Scrollen nicht zur Seite darunter durchsickert.

Diese Eigenschaften sind nicht animierbar, aber scrollbar-color reagiert auf Hover-States über JavaScript oder CSS-Variablen.

Syntax & Werte

8 Werte

scrollbar-width

Wert	Beschreibung	Beispiel
`auto`	Standard-Breite des Betriebssystems, meist 10-15px je nach OS.
`thin`	Schmalere Scrollbar, meist 6-8px, ideal für Sidebars und Chat-Fenster.
`none`	Versteckt die Scrollbar komplett. Inhalt bleibt scrollbar, aber ohne visuellen Indikator.

scrollbar-color

Wert	Beschreibung	Beispiel
`auto`	Standard-Farben des Betriebssystems, meist grau auf hellgrau.
`<thumb-color> <track-color>`	Zwei Farben: erst Thumb (Griff), dann Track (Schiene). Beispiel: scrollbar-color: #1a56db #e5e7eb.

overscroll-behavior

Wert	Beschreibung	Beispiel
`auto`	Standard: Scroll-Gesten werden an Parent-Elemente weitergegeben (Scroll-Chaining).
`contain`	Verhindert Scroll-Chaining: Scroll bleibt im Element, keine Weitergabe an Body.
`none`	Verhindert Scroll-Chaining UND native Überroll-Effekte (z.B. Pull-to-Refresh auf Mobilgeräten).

Beispiele

12 Beispiele

Drei Boxen zeigen auto, thin und none im direkten Vergleich. Beachte, wie none die Scrollbar ausblendet: Der Inhalt bleibt scrollbar, aber ohne visuellen Hinweis.

scrollbar-width Vergleich

.auto {
  scrollbar-width: auto; /* Standard-Breite */
}
.thin {
  scrollbar-width: thin; /* Schmal, ideal für Sidebars */
}
.none {
  scrollbar-width: none; /* Versteckt, nur mit Vorsicht */
}

<div class="wrapper">
<div class="box auto">
  <h3>auto (Standard)</h3>
  <p>Normale Scrollbar-Breite, meist 10-15px.</p>
  <p>Das ist die Standardeinstellung aller Browser.</p>
  <p>Scrolle hier, um die Breite zu sehen.</p>
  <p>Weitere Zeilen für Scroll-Content.</p>
  <p>Noch mehr Text zum Scrollen.</p>
  <p>Und noch eine Zeile.</p>
</div>
<div class="box thin">
  <h3>thin</h3>
  <p>Schmalere Scrollbar, meist 6-8px.</p>
  <p>Ideal für Sidebars und kompakte Layouts.</p>
  <p>Scrolle hier, um den Unterschied zu sehen.</p>
  <p>Weitere Zeilen für Scroll-Content.</p>
  <p>Noch mehr Text zum Scrollen.</p>
  <p>Und noch eine Zeile.</p>
</div>
<div class="box none">
  <h3>none</h3>
  <p>Scrollbar ist versteckt, aber scrollbar!</p>
  <p>Nutzer sehen keinen Indikator.</p>
  <p>Scrolle hier trotzdem, es funktioniert.</p>
  <p>Weitere Zeilen für Scroll-Content.</p>
  <p>Noch mehr Text zum Scrollen.</p>
  <p>Und noch eine Zeile.</p>
</div>
</div>

Zwei Boxen zeigen passende Scrollbar-Farben für Dark- und Light-Theme. Beachte die Reihenfolge: erst Thumb (Griff), dann Track (Schiene).

Dark/Light Theme Scrollbar-Farben

.light {
  scrollbar-color: #1a56db #e5e7eb; /* Blauer Thumb, heller Track */
}
.dark {
  scrollbar-color: #7c3aed #374151; /* Violetter Thumb, dunkler Track */
}

<div class="wrapper">
<div class="box light">
  <h3>Light Theme</h3>
  <p>Helle Scrollbar mit blauem Thumb und hellgrauem Track.</p>
  <p>scrollbar-color: #1a56db #e5e7eb;</p>
  <p>Scrolle hier, um die Farben zu sehen.</p>
  <p>Weitere Zeilen für Scroll-Content.</p>
  <p>Noch mehr Text zum Scrollen.</p>
  <p>Und noch eine Zeile.</p>
  <p>Mehr Content für den Scroll-Bereich.</p>
</div>
<div class="box dark">
  <h3>Dark Theme</h3>
  <p>Dunkle Scrollbar mit violettem Thumb und grauem Track.</p>
  <p>scrollbar-color: #7c3aed #374151;</p>
  <p>Scrolle hier, um die Farben zu sehen.</p>
  <p>Weitere Zeilen für Scroll-Content.</p>
  <p>Noch mehr Text zum Scrollen.</p>
  <p>Und noch eine Zeile.</p>
  <p>Mehr Content für den Scroll-Bereich.</p>
</div>
</div>

Eine Sidebar-Navigation mit schlanker, farbiger Scrollbar. Perfekt für App-Layouts mit vielen Links.

Sidebar mit Custom Scrollbar

.sidebar {
  scrollbar-width: thin;
  scrollbar-color: #059669 #374151; /* Grüner Thumb, dunkler Track */
  overflow: auto;
}

<div class="sidebar">
<h3>Navigation</h3>
<nav>
  <ul>
    <li><a href="#dashboard">Dashboard</a></li>
    <li><a href="#projekte">Projekte</a></li>
    <li><a href="#aufgaben">Aufgaben</a></li>
    <li><a href="#team">Team</a></li>
    <li><a href="#kalender">Kalender</a></li>
    <li><a href="#berichte">Berichte</a></li>
    <li><a href="#dokumente">Dokumente</a></li>
    <li><a href="#einstellungen">Einstellungen</a></li>
    <li><a href="#hilfe">Hilfe</a></li>
    <li><a href="#kontakt">Kontakt</a></li>
    <li><a href="#ueber">Über uns</a></li>
    <li><a href="#impressum">Impressum</a></li>
  </ul>
</nav>
</div>

Ein Modal-Overlay mit overscroll-behavior: contain: scrolle im Modal, und das Body-Element darunter bewegt sich nicht mit.

overscroll-behavior: contain (Modal)

.modal-overlay {
  overscroll-behavior: contain; /* Verhindert Scroll-Chaining */
  overflow: auto;
}

<p>Scrolle im Body-Bereich (dieser Text hier).</p>
<p>Dann scrolle im Modal, der Body bewegt sich nicht!</p>
<p>Das ist overscroll-behavior: contain in Aktion.</p>
<p>Weitere Body-Zeilen für Scroll-Content.</p>
<p>Noch mehr Text zum Scrollen.</p>

<div class="modal-overlay">
<h3>Modal-Inhalt</h3>
<p>Scrolle hier im Modal, ohne Scroll-Chaining zum Body.</p>
<p>overscroll-behavior: contain verhindert die Weitergabe.</p>
<p>Perfekt für Overlays und Sidebars.</p>
<p>Weitere Zeilen für Scroll-Content.</p>
<p>Noch mehr Text zum Scrollen.</p>
<p>Und noch eine Zeile.</p>
<p>Mehr Content für den Modal-Bereich.</p>
<p>Scrolle weiter, kein Body-Scroll!</p>
<p>Letzte Zeile im Modal.</p>
</div>

Ein vollständiges Chat-Fenster kombiniert scrollbar-width: thin, scrollbar-color und overscroll-behavior: contain für ein sauberes, kontrolliertes Scroll-Erlebnis.

Chat-Fenster komplett

.chat-messages {
  overflow: auto;
  overscroll-behavior: contain; /* Kein Scroll-Chaining */
  scrollbar-width: thin;
  scrollbar-color: #1a56db #e5e7eb; /* Blau auf Hellgrau */
}

<div class="chat-window">
<div class="chat-header">
  Chat mit Team
</div>
<div class="chat-messages">
  <div class="message theirs">
    <strong>Anna</strong>
    Hey, wie läuft das Projekt?
  </div>
  <div class="message mine">
    <strong>Du</strong>
    Super! Die Scrollbars sehen jetzt viel besser aus.
  </div>
  <div class="message theirs">
    <strong>Anna</strong>
    Cool! Hast du overscroll-behavior verwendet?
  </div>
  <div class="message mine">
    <strong>Du</strong>
    Ja, contain verhindert das Scroll-Chaining perfekt.
  </div>
  <div class="message theirs">
    <strong>Anna</strong>
    Perfekt! Scrolle mal im Chat, kein Body-Scroll!
  </div>
  <div class="message mine">
    <strong>Du</strong>
    Genau das wollte ich! 🎉
  </div>
  <div class="message theirs">
    <strong>Anna</strong>
    Und die dünne Scrollbar ist auch schöner.
  </div>
  <div class="message mine">
    <strong>Du</strong>
    scrollbar-width: thin + passende Farben = ❤️
  </div>
</div>
<div class="chat-input">
  <input type="text" placeholder="Nachricht schreiben...">
  <button>Senden</button>
</div>
</div>

Barrierefreiheit

scrollbar-width: none solltest du nur nutzen, wenn du alternative Scroll-Indikatoren bietest. Viele Nutzer verlassen sich auf die Scrollbar als visuellen Hinweis. Bei scrollbar-color gilt: Thumb und Track brauchen mindestens 3:1 Kontrast zueinander, damit Nutzer mit Sehschwäche den Griff erkennen.

overscroll-behavior: contain ist auf Modals und Sidebars sehr sinnvoll: es verhindert versehentliches Body-Scrollen und verbessert die Fokus-Kontrolle. Tastatur-Navigation bleibt davon unbeeinflusst.

Teste deine Scrollbars mit Screenreadern. Die Eigenschaften ändern nichts an der semantischen Struktur, aber versteckte Scrollbars können Nutzer verwirren, die nicht wissen, dass mehr Content verfügbar ist.

Häufige Fehler

5 Fehler

01 Falsche Farbreihenfolge

scrollbar-color: #e5e7eb #1a56db setzt Track zuerst. Falsch! Erst Thumb, dann Track.

02 scrollbar-width: none ohne Indikator

Nutzer sehen nicht, dass mehr Content verfügbar ist. Biete alternative Hinweise wie Fade-Effekte oder Scroll-Arrows.

03 overscroll-behavior vergessen

Modals ohne contain lassen den Body darunter mitscrollen. Das nervt auf Mobilgeräten.

04 ::-webkit-scrollbar statt Standard

Die alten Webkit-Pseudo-Elemente funktionieren nur in Chrome/Edge. Nutze die Standard-Eigenschaften für crossbrowser Support.

05 scrollbar-color ohne scrollbar-width

Vergisst du scrollbar-width: thin, bleibt die breite Standard-Scrollbar mit deinen Farben. Das sieht klobig aus.

Browser-Kompatibilität

5 von 5

scrollbar-width, scrollbar-color und overscroll-behavior werden von allen modernen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Scrollbar-Styling wird in E-Mails nicht unterstützt. E-Mail-Clients zeigen immer ihre Standard-Scrollbars.

Apple Mail

Keine

Kein Support
Gmail

Keine

Kein Support
Outlook

Keine

Kein Support
Yahoo Mail

Keine

Kein Support
Thunderbird

Keine

Kein Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da