Scrollbar-Styling
Zuletzt aktualisiert am 3. Juli 2026
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.
scrollbar-width: auto | thin | none auto 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
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
scrollbar-width Vergleich
Drei Boxen zeigen auto, thin und none im direkten Vergleich. Beachte, wie none die Scrollbar ausblendet: Der Inhalt bleibt scrollbar, aber ohne visuellen Hinweis.
.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>Dark/Light Theme Scrollbar-Farben
Zwei Boxen zeigen passende Scrollbar-Farben für Dark- und Light-Theme. Beachte die Reihenfolge: erst Thumb (Griff), dann Track (Schiene).
.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>Sidebar mit Custom Scrollbar
Eine Sidebar-Navigation mit schlanker, farbiger Scrollbar. Perfekt für App-Layouts mit vielen Links.
.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>overscroll-behavior: contain (Modal)
Ein Modal-Overlay mit overscroll-behavior: contain: scrolle im Modal, und das Body-Element darunter bewegt sich nicht mit.
.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>Chat-Fenster komplett
Ein vollständiges Chat-Fenster kombiniert scrollbar-width: thin, scrollbar-color und overscroll-behavior: contain für ein sauberes, kontrolliertes Scroll-Erlebnis.
.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
- Falsche Farbreihenfolge:
scrollbar-color: #e5e7eb #1a56dbsetzt Track zuerst. Falsch! Erst Thumb, dann Track. - scrollbar-width: none ohne Indikator: Nutzer sehen nicht, dass mehr Content verfügbar ist. Biete alternative Hinweise wie Fade-Effekte oder Scroll-Arrows.
- overscroll-behavior vergessen: Modals ohne
containlassen den Body darunter mitscrollen. Das nervt auf Mobilgeräten. - ::-webkit-scrollbar statt Standard: Die alten Webkit-Pseudo-Elemente funktionieren nur in Chrome/Edge. Nutze die Standard-Eigenschaften für crossbrowser Support.
- 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
scrollbar-width, scrollbar-color und overscroll-behavior werden von allen modernen Browsern unterstützt.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | — |
| Firefox | Komplett | — |
| Safari | Komplett | — |
| Edge | Komplett | — |
| Opera | Komplett | — |
Email-Kompatibilität
Scrollbar-Styling wird in E-Mails nicht unterstützt. E-Mail-Clients zeigen immer ihre Standard-Scrollbars.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Apple Mail | Keine | Kein Support |
| Gmail | Keine | Kein Support |
| Outlook | Keine | Kein Support |
| Yahoo Mail | Keine | Kein Support |
| Thunderbird | Keine | Kein Support |
Verwandte Eigenschaften
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.