CSS-Scrollbar-Generator
Gestalten Sie eine benutzerdefinierte farbige Scrollbar mit Live-Vorschau und kopieren Sie das CSS — kompatibel mit WebKit und Firefox.
733 Aufrufe
Dieser Bereich dient zum Testen Ihrer benutzerdefinierten Scrollbar. Scrollen Sie nach unten und beobachten Sie, wie die Leiste rechts Ihrem Design folgt. Ändern Sie Farben und Größen; das Ergebnis wird sofort auf diesen Bereich angewendet.
Dieser Bereich dient zum Testen Ihrer benutzerdefinierten Scrollbar. Scrollen Sie nach unten und beobachten Sie, wie die Leiste rechts Ihrem Design folgt. Ändern Sie Farben und Größen; das Ergebnis wird sofort auf diesen Bereich angewendet.
Dieser Bereich dient zum Testen Ihrer benutzerdefinierten Scrollbar. Scrollen Sie nach unten und beobachten Sie, wie die Leiste rechts Ihrem Design folgt. Ändern Sie Farben und Größen; das Ergebnis wird sofort auf diesen Bereich angewendet.
Dieser Bereich dient zum Testen Ihrer benutzerdefinierten Scrollbar. Scrollen Sie nach unten und beobachten Sie, wie die Leiste rechts Ihrem Design folgt. Ändern Sie Farben und Größen; das Ergebnis wird sofort auf diesen Bereich angewendet.
Dieser Bereich dient zum Testen Ihrer benutzerdefinierten Scrollbar. Scrollen Sie nach unten und beobachten Sie, wie die Leiste rechts Ihrem Design folgt. Ändern Sie Farben und Größen; das Ergebnis wird sofort auf diesen Bereich angewendet.
Dieser Bereich dient zum Testen Ihrer benutzerdefinierten Scrollbar. Scrollen Sie nach unten und beobachten Sie, wie die Leiste rechts Ihrem Design folgt. Ändern Sie Farben und Größen; das Ergebnis wird sofort auf diesen Bereich angewendet.
Wie Werden Scrollbars mit CSS Gestaltet?
Es gibt zwei Mechanismen: WebKit-Browser (Chrome, Edge, Safari) verwenden die ::-webkit-scrollbar-Pseudoelement-Familie, mit der Sie Track, Thumb, Breite und Radius gestalten können; Firefox verwendet die einfacheren Standardeigenschaften scrollbar-color und scrollbar-width. Der generierte Code enthält beides, sodass Ihre Scrollbar überall einheitlich aussieht.
Passen Sie Farben, Breite und Radius an; der Vorschaubereich rechts scrollt mit Ihrem angewendeten Design, und das CSS aktualisiert sich sofort.
Häufig gestellte Fragen
Warum sieht meine Scrollbar in Firefox anders aus?
Firefox ignoriert ::-webkit-scrollbar-Regeln und berücksichtigt nur scrollbar-color (Thumb- und Track-Farben) sowie scrollbar-width. Radius und Hover-Effekte sind WebKit-exklusiv; Firefox zeigt eine vereinfachte Version.
Kann ich die Scrollbar nur eines Elements gestalten?
Ja — begrenzen Sie die Selektoren: .mein-kasten::-webkit-scrollbar { … } und .mein-kasten { scrollbar-color: … }. Wenden Sie es auf html oder body an (oder verwenden Sie die reinen Selektoren dieses Generators) für die ganze Seite.
Funktionieren benutzerdefinierte Scrollbars auf Mobilgeräten?
Meist nicht: iOS und die meisten Android-Browser verwenden Overlay-Scrollbars, die diese Stile ignorieren. Betrachten Sie benutzerdefinierte Scrollbars als Desktop-Verbesserung.
Ähnliche Tools
Problem melden
CSS-Scrollbar-Generator