CSS-Scrollbar-Styler
Benutzerdefinierte CSS-Scrollbar-Stile mit visuellen Steuerelementen erstellen.
Geprüft von ZeroUtil Editorial Team · Zuletzt geprüft
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}Scrollbar gestalten
- Scrollbar-Breite festlegen mit dem Schieberegler. Dies entspricht
::-webkit-scrollbar { width: ... }für WebKit/Blink-Browser. Firefox verwendet stattdessen das gröberescrollbar-width: thin | auto | none-Schlüsselwort. - Spurfarbe auswählen (die Schiene, auf der sich der Daumen bewegt). Wird als
::-webkit-scrollbar-track { background: ... }und als zweiter Wert von Firefoxsscrollbar-colorausgegeben. - Daumenfarbe auswählen (der ziehbare Teil). Wird als
::-webkit-scrollbar-thumb { background: ... }und als erster Wert von Firefoxsscrollbar-colorausgegeben. - Hover-Farbe des Daumens festlegen für visuelles Feedback beim Mausüberfahren im Desktop-Browser. Nur WebKit unterstützt dies direkt; Firefox-Scrollbars haben keinen Hover-Zustand.
- Randradius des Daumens anpassen, um die Ecken abzurunden.
- Vorschaubereich scrollen, um die gestaltete Scrollbar live zu sehen, dann CSS kopieren klicken, um sowohl die WebKit-Pseudo-Element-Regeln als auch die Firefox-
scrollbar-*-Eigenschaften zu übernehmen.
Zwei unterschiedliche APIs im Hintergrund
Die Scrollbar-Anpassung ist einer der unübersichtlicheren Bereiche von CSS, weil Browser sie auf zwei inkompatible Arten implementieren. WebKit und Blink (Safari, Chrome, Edge, Opera und alle Chromium-basierten eingebetteten Browser) stellen eine Reihe nicht-standardisierter Pseudo-Elemente bereit: ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button sowie ::-webkit-scrollbar-corner für das kleine Quadrat, wo horizontale und vertikale Scrollbars aufeinandertreffen. Diese ermöglichen eine feingranulare Kontrolle über Breite, Farbe, Verläufe, Rahmen, Schatten und Hover/Active-Zustände.
Firefox hat diese Pseudo-Elemente nie implementiert. Stattdessen hat es die CSS-Scrollbars-Module-Level-1-Eigenschaften eingeführt - scrollbar-width und scrollbar-color -, die weit weniger Kontrolle bieten: ein Drei-Werte-Breiten-Schlüsselwort (auto | thin | none) und eine einzelne scrollbar-color: <thumb> <track>-Deklaration ohne Hover-Zustand, ohne border-radius, ohne benutzerdefinierte Breiten und ohne Unterstützung für Verläufe. Der W3C hat Firefoxs Ansatz in CSS Scrollbars Level 1 standardisiert; Safari und Chrome haben 2023-2024 Unterstützung dafür hinzugefügt (Safari 18, Chrome 121), sodass die Standardeigenschaften nun in jedem Browser neben den WebKit-Pseudo-Elementen funktionieren. Der Generator schreibt beide, damit dein Styling graceful degradiert: WebKit-Browser erhalten den vollständigen Look über Pseudo-Elemente, Firefox die einfachere, aber dennoch gestaltete Version über die Standardeigenschaften.
Wann gestaltete Scrollbars sinnvoll sind
- Dark-Mode-Themes, bei denen die Standard-Browser-Scrollbar störend hell wirkt.
- Schmale Seitenleisten, bei denen die Standard-15-17-px-Scrollbar das Layout dominiert.
- Markenkonforme Produkt-Apps, die Scrollbar-Akzentfarben passend zum Designsystem wünschen.
- Chat- und E-Mail-Oberflächen, wo subtile halbtransparente Scrollbars das visuelle Rauschen reduzieren.
- Kiosk- und TV-Display-Apps, bei denen die Standard-Scrollbar unprofessionell wirkt.
- Code-Editor-Einbettungen auf Dokumentationsseiten - benutzerdefinierte Scrollbars passen zum Editor-Look.
Fallstricke und Barrierefreiheitshinweise
- Scrollbar auf scrollbaren Containern nicht vollständig ausblenden. Sie ist ein wichtiger Hinweis für Tastaturnutzer, Bildschirmlupen-Nutzer und Mausnutzer mit Trackpads, die keine automatischen Scrollbars anzeigen. Mit
::-webkit-scrollbar { display: none }sieht der Container nicht scrollbar aus, obwohl er es ist - ein gravierender WCAG-Fehler. - Mobile Browser verwenden Overlay-Scrollbars, die sich automatisch ausblenden. iOS Safari und Chrome auf Android rendern Scrollbars als schwebende Overlays, die nur beim Scrollen erscheinen. Die meisten Scrollbar-Stile haben auf Mobilgeräten keine sichtbare Wirkung - investiere nicht zu viel in Hover-Zustände, die nur Desktop-Nutzer sehen.
- Geringer Kontrast zwischen Daumen und Spur beeinträchtigt die Barrierefreiheit. WCAG-Erfolgskriterium 1.4.11 "Non-text Contrast" fordert ein Kontrastverhältnis von 3:1 zwischen UI-Komponenten und ihrem Hintergrund. Ein Daumen, der fast den gleichen Farbton wie die Spur hat, wirkt zwar elegant, besteht aber den Standard nicht. Prüfe Daumen- und Spurfarbe mit einem Kontrastprüfer.
- Sehr dünne Scrollbars sind schwer zu greifen. Scrollbars unter 8 px Breite lassen sich mit einem Trackpad kaum treffen und mit einem ungenauen Zeiger gar nicht. Apples HIG empfiehlt 10-15 px; Microsofts Fluent-Minimum liegt bei 12 px.
- Benutzerdefinierte Scrollbars können das native Erscheinungsbild unter macOS brechen. macOS-Nutzer erwarten Overlay-Scrollbars, die ein- und ausgeblendet werden. Eine permanente benutzerdefinierte Scrollbar wirkt fremd. Verwende
@media (hover: none) and (pointer: coarse), um die Gestaltung auf Touch-Geräten zu überspringen. - Scrollbar-Gestaltung gilt nur für overflow: auto/scroll-Container. Die Scrollbar des Wurzelelements
<html>ist besonders: Chromium berücksichtigthtml::-webkit-scrollbar, Safari nur teilweise, und Firefox nutzthtml { scrollbar-color: ... }.
Spezifikationshintergrund
Die Pseudo-Element-Familie ::-webkit-scrollbar ist eine WebKit-Erweiterung aus etwa 2009, die nie standardisiert wurde. CSS Scrollbars Module Level 1 ist der eigentliche Standard, der scrollbar-width und scrollbar-color sowie die spätere Eigenschaft scrollbar-gutter hinzufügt, die Platz für Scrollbars reserviert, auch wenn kein Scrollen erforderlich ist. Firefox hat den Standard zuerst eingeführt; Chrome 121 und Safari 18 haben 2023-2024 Unterstützung hinzugefügt. Derzeit müssen beide ausgeliefert werden - WebKit-Pseudo-Elemente für feingranulare Kontrolle auf Chromium/Safari, Standardeigenschaften für Firefox. caniuse.com/css-scrollbar-color und caniuse.com/css-scrollbar-width verfolgen die Standardeigenschaften.
Anpassung versus unberührt lassen
Gestaltete Scrollbars sind ein kleines Detail, das die visuelle Identität eines Produkts schärfen kann, aber es gibt ein echtes Argument dafür, den nativen Browser-Look unangetastet zu lassen. Native Scrollbars passen sich automatisch an den OS-Dark-Mode an, bieten Barrierefreiheitsmerkmale, die benutzerdefinierte Gestaltung beeinträchtigt, und verhalten sich konsistent in allen Apps auf dem Gerät des Nutzers. Wenn dein Produkt auf Desktop-Power-User abzielt (Entwickler-Tools, Design-Software, Tabellenkalkulationen), unterstreichen native Scrollbars den Eindruck einer echten App. Im Vergleich zu JavaScript-Scrollbar-Bibliotheken (PerfectScrollbar, SimpleBar, OverlayScrollbars) hat CSS-only-Scrollbar-Gestaltung eine deutlich bessere Performance und Barrierefreiheit - die native Scrollbar übernimmt weiterhin Tastatur-, Fokus- und Screen-Reader-Integration. JavaScript-Bibliotheken re-implementieren die Scrollbar oft und brechen dabei subtil das Tastatur-Scrollen oder Rad-Events. Bleibe bei CSS, es sei denn, du brauchst wirklich Funktionen, die die native Scrollbar nicht bieten kann.
Häufig gestellte Fragen
Warum sieht die Scrollbar-Gestaltung in Firefox und Chrome unterschiedlich aus?
Weil beide Engines grundlegend verschiedene APIs implementieren. Chrome und Safari verwenden die nicht-standardisierte Pseudo-Element-Familie <code>::-webkit-scrollbar</code>, mit der sich Breite in Pixel, mehrere Farben (inkl. Hover-Zustände), border-radius, Verläufe und Schatten steuern lassen. Firefox nutzt die W3C-Standard-Eigenschaften <code>scrollbar-width</code> und <code>scrollbar-color</code>, die nur drei Breiten (<code>auto</code>, <code>thin</code>, <code>none</code>) und ein einzelnes Daumen/Spur-Farbpaar ohne Hover-Zustand bieten. Der Generator gibt beide Varianten aus, damit der Effekt browserübergreifend graceful degradiert.
Was passiert, wenn ich scrollbar-width: none setze?
Sowohl Firefox (über <code>scrollbar-width: none</code>) als auch WebKit (über <code>::-webkit-scrollbar { display: none }</code>) blenden die Scrollbar vollständig aus und lassen das Element trotzdem scrollbar - Rad-, Touch- und Tastaturnavigation funktionieren weiterhin. Das Ausblenden der Scrollbar entfernt jedoch einen wichtigen visuellen Hinweis für Nutzer, die nicht wissen, dass Inhalte scrollen. WCAG betrachtet unsichtbare Scrollbars als Usability-Rückschritt. Verwende stattdessen <code>scrollbar-gutter: stable</code> zusammen mit einer sehr dünnen, halbtransparenten Scrollbar.
Funktioniert benutzerdefiniertes Scrollbar-CSS auf iOS und Android?
Meist nicht. iOS Safari und Chrome auf Android rendern Scrollbars als schwebende Overlay-Indikatoren, die nur beim Scrollen erscheinen und nach einer Sekunde automatisch ausgeblendet werden. Die WebKit-Pseudo-Elemente haben auf iOS begrenzte Wirkung - Farben werden möglicherweise angewendet, Breite und Hover-Zustände jedoch ignoriert. Der Großteil der Scrollbar-Gestaltung gilt nur für Desktop. Verwende <code>@media (hover: hover)</code>, um die Stile auf Geräte mit Zeigegerät zu beschränken.
Speichert dieses Tool meine Farbauswahl?
Nein. Spurfarbe, Daumenfarbe, Hover-Farbe, Breite und Randradius liegen im Preact-Komponentenstatus im Browser. Der Generator erstellt den CSS-String mit Template Literals und fügt ihn in einen lokalen <code><style></code>-Block ein, der auf den Vorschaubereich begrenzt ist. Es gibt keinen API-Aufruf, der mit den Farbauswahlfeldern verbunden ist.
Wie halte ich das Layout stabil, wenn Scrollbars erscheinen und verschwinden?
Verwende <code>scrollbar-gutter: stable</code> (oder <code>stable both-edges</code>) auf dem scrollbaren Container. So reserviert der Browser Platz für die Scrollbar, auch wenn der Inhalt ohne Scrollen passt, damit sich der Text nicht verschiebt, wenn Overflow auftritt. Diese Eigenschaft gehört zum CSS Overflow Module Level 4 und wird ab Chrome 94+, Firefox 97+ und Safari 17+ unterstützt.
Kann ich Verläufe und Bilder für den Scrollbar-Daumen verwenden?
In WebKit ja - <code>::-webkit-scrollbar-thumb</code> akzeptiert jeden CSS-<code>background</code>-Wert, einschließlich linearer Verläufe, radialer Verläufe und Hintergrundbilder. Firefoxs <code>scrollbar-color</code> akzeptiert nur einen einfarbigen Wert - keine Verläufe, keine Bilder - daher unterscheidet sich der Effekt zwischen Browsern.
Welche Breite sollte eine Scrollbar haben?
Apples HIG und Microsofts Fluent-Designsystem empfehlen beide 10-15 px für Mausnutzer. Unter 8 px werden Scrollbars schwer klick- oder ziehbar, besonders auf Displays mit niedriger DPI. WCAG 2.2 Erfolgskriterium 2.5.5 "Target Size (Enhanced)" fordert mindestens 44x44 CSS-Pixel für interaktive Ziele. Für barrierefreie Designs bleibe bei 12-16 px.
Sind benutzerdefinierte Scrollbars barrierefrei?
Das können sie sein, wenn ausreichend Kontrast zwischen Daumen und Spur gewährleistet ist (WCAG 1.4.11 Non-text Contrast fordert 3:1), die Scrollbar eine nutzbare Breite hat (mindestens 10 px) und die Scrollbar eines scrollbaren Elements nie versteckt wird. Nutzer mit Tremor, eingeschränkter Motorik oder Sehbehinderungen sind darauf angewiesen, dass Scrollbars sichtbar und groß genug zum Anvisieren sind.
Gibt der Generator die Standard-Eigenschaft scrollbar-color aus?
Ja. Der generierte CSS-Code enthält sowohl die WebKit-Pseudo-Element-Regeln als auch die Standardeigenschaften <code>scrollbar-width</code> und <code>scrollbar-color</code> aus dem CSS Scrollbars Module Level 1. Chromium 121 und Safari 18 unterstützen die Standardeigenschaften jetzt. Wenn beide vorhanden sind, haben die Pseudo-Element-Regeln auf diesen Browsern Vorrang. Firefox liest nur die Standardeigenschaften.
Verwandte Tools
- Verlauf-Generator
Erstelle CSS-Linear- und Radialverläufe mit einem visuellen Editor.
- CSS-Muster-Generator
Sich wiederholende CSS-Hintergrundmuster mit visuellen Voreinstellungen erstellen.
- Entscheidungsrad
Füge eigene Optionen hinzu und drehe ein buntes Rad, um zufällige Entscheidungen zu treffen. Animiertes CSS-Rad mit sanfter Verzögerung.
- Glassmorphismus-Generator
Mattglas-CSS-Effekte mit Backdrop-Blur erstellen. Glassmorphismus-Generator und Glass-Effekt-CSS-Builder in einem.
- CSS-Grid-Generator
CSS-Grid-Layouts visuell erstellen mit Live-Vorschau. Funktioniert als Grid-System-Generator und HTML-Grid-Generator.
- Textschatten-Generator
CSS-Textschatten mit visuellem Editor und Voreinstellungen erstellen. Fungiert auch als CSS-Schriftschatten-Generator.
Mehr CSS & Design
Aspect Ratio Calculator
Calculate and visualize aspect ratios for any dimensions.
Open toolBlob Shape Generator
Generate organic blob shapes as SVG.
Open toolBorder Radius Generator
Create CSS border-radius with a visual corner editor.
Open toolCSS Box Shadow Generator
Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.
Open toolColor Palette Generator
Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).
Open toolColor Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool