CSS-Scrollleisten-Styler
Entwerfen Sie benutzerdefinierte Scrollleisten mit CSS. Passen Sie Breite, Spurfarbe, Daumenfarbe, Eckenradius und Hover-Effekte an. Live-Vorschau und kopierbereit CSS.
Scrollbar
Width10px
Thumb Border Radius5px
Track Border Radius0px
Thumb Border0px
Colors
Track Color
#f1f1f1
Thumb Color
#888888
Thumb Hover
#555555
Thumb Border Color
#ffffff
Preview
CSS Code
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
height: 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;
}So verwenden Sie CSS-Scrollleisten-Styler
- 1Passen Sie die Breite der Scrollleiste, die Spurfarbe und die Daumenfarbe an.
- 2Passen Sie Eckenradius und Hover-Effekte an.
- 3Zeigen Sie eine Vorschau der Scrollleiste bei Beispielinhalten an.
- 4Kopieren Sie den CSS-Code für Ihr Projekt.
ZenovayAnalytics
Wissen Sie, was Ihre Besucher wirklich tun.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.Häufig gestellte Fragen
Wie gestalte ich Scrollleisten mit CSS?▾
Verwenden Sie ::-webkit-scrollbar Pseudo-Elemente für Chrome/Safari/Edge und scrollbar-width/scrollbar-color Eigenschaften für Firefox. Dieser Generator gibt beide Syntaxen aus.
Welche Browser unterstützen benutzerdefinierte Scrollleisten?▾
Chrome, Edge und Safari unterstützen ::-webkit-scrollbar (85%+ Benutzer). Firefox 64+ unterstützt scrollbar-width und scrollbar-color. Zusammen ~97% Abdeckung.
Kann ich Scrollleisten transparent machen?▾
Ja. Setzen Sie die Scrollleistenbreite auf 0 und Hintergrund auf transparent für WebKit oder scrollbar-width: none für Firefox. Der Inhalt bleibt scrollbar.
Beeinträchtigt benutzerdefiniertes Scrollleisten-CSS die Leistung?▾
Vernachlässigbarer Einfluss. Das Scrollleisten-Styling wird einmal pro Element angewendet, nicht pro Frame. Selbst komplexe Stile haben keine messbaren Leistungsauswirkungen.
Sollte ich eine JavaScript-Scrollleistenbibliothek verwenden?▾
Nur CSS-Scrollleisten werden bevorzugt. JS-Bibliotheken erhöhen das Gewicht und können Barrierefreiheitsprobleme verursachen. Verwenden Sie JS nur, wenn CSS Ihr Design nicht erreichen kann.