Kategorie: Entwicklung
CSS-Scrollleisten-Generator
Erzeuge CSS für eigene Scrollleisten lokal, mit Live-Vorschau
Gestalte eigene Scrollleisten mit Live-Vorschau und kopiere das CSS für scrollbar-color, scrollbar-width und die WebKit-Gestaltung. Im Browser erzeugt.
Vorschau
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color und scrollbar-width sind die Standard-Eigenschaften und das, was Firefox und aktuelles Chrome verwenden. Die ::-webkit--Regeln sind ein nicht standardisiertes Präfix für ältere Chrome-, Edge- und Safari-Versionen – die beiden Engines stellen das Ergebnis nicht identisch dar.
Vorschau und erzeugtes CSS entstehen beide in deinem Browser.
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Die Gestaltung von Scrollleisten verteilt sich auf zwei Mechanismen. Das Modul CSS Scrollbars Styling liefert `scrollbar-color` und `scrollbar-width`: zwei Eigenschaften, breite Unterstützung inklusive Firefox und bewusst begrenzte Kontrolle. Die älteren `::-webkit-scrollbar`-Pseudoelemente geben deutlich mehr her, sind aber ein nicht standardisiertes Präfix. Dieser Generator gibt zuerst die Standard-Eigenschaften aus und danach den beschrifteten WebKit-Block, sodass du breite Abdeckung bekommst, ohne so zu tun, als wären beide dasselbe. Sie stellen es nicht identisch dar, und eine Scrollleiste ist ein Bedienelement, auf das Menschen angewiesen sind – deshalb scrollt die Vorschau hier wirklich, statt nur eine zu zeichnen.
So funktioniert es
- Lege den Selektor des Elements fest, das du gestalten willst, und wähle Farben für Schieber, Schiene und Hover.
- Wähle scrollbar-width und stelle WebKit-Breite und Radius ein.
- Scrolle in der Vorschau zur Kontrolle und kopiere das CSS.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Funktionieren eigene Scrollleisten in jedem Browser?
- Nicht identisch. scrollbar-color und scrollbar-width laufen in Firefox sowie aktuellem Chrome und Edge; die ::-webkit--Regeln decken ältere Chrome-, Edge- und Safari-Versionen ab. Das Werkzeug gibt beides aus, aber die Engines zeichnen Scrollleisten unterschiedlich, und kein CSS gleicht das vollständig an.
- Was ist scrollbar-color?
- Die Standard-Eigenschaft, die die Farben von Schieber und Schiene in einer Deklaration setzt – erst der Schieber, dann die Schiene. Sie gehört zum Modul CSS Scrollbars Styling und ist damit die Fassung, mit der man anfängt.
- Warum überhaupt WebKit-CSS mitliefern?
- Weil die Standard-Eigenschaften nur Farbe und eine grobe Breite freigeben und ältere WebKit- und Blink-Versionen sie nicht unterstützen. Die präfigierten Regeln ergänzen explizite Größe und Radius und decken diese Browser ab.
- Soll ich die Scrollleiste ganz ausblenden?
- Vorsicht. scrollbar-width: none entfernt einen sichtbaren Hinweis darauf, dass ein Bereich scrollt, und die Möglichkeit, ihn zu ziehen – das trifft alle ohne Mausrad oder Trackpad. Erwäge lieber eine dünne, kontrastreiche Leiste.