CSS | Eigene Scrollbar verwenden

Ich habe mich gefragt, wie es einige Websites hinbekommen, ihre Scrollleisten anders einzufärben. Dieses eintönige grau ist öde - und passt nicht zum restlichen Erscheinungsbild der Website. Beispiel gefällig? Guckt euch mal die Kontaktliste bei Facebook rechts auf der Seite an. Oder scrollt mal bei GMail herum. Das sind nur zwei Beispiele. Zuerst muss ich euch aber enttäuschen. Die reine CSS-Lösung, die ich euch vorstelle, funktioniert momentan nur in Chrome. Dafür kann sie die Scrollleiste der kompletten Seite ändern. Also, wie funktioniert das ganze nun?

Realisiert ist es über Pseudoelemente. Ihr kennt sicherlich :hover oder :visited. Ebenso lässt sich in Chrome die Scrollbar modifizieren. Die relevanten Pseudoelemente sind folgende:

::-webkit-scrollbar { } /* Die gesamte Scrolleiste */ 
::-webkit-scrollbar-button { } /* Die Pfeil-Buttons oben und unten */ 
::-webkit-scrollbar-track { } /* Bereich für den Schieberegler */ 
::-webkit-scrollbar-thumb { } /* Schieberegler */
::-webkit-scrollbar-corner { } /* Der Größenregler bei Textfeldern */

Damit kann man alle Teile der Leiste beliebig - wie bei HTML-Elementen - gestalten. Ebenso lässt sich mit den weiteren Pseudoelementen arbeiten. :hover funktioniert ebenso wie beispielsweise :active.

Wenn ihr das Design der Netzleben-Scrolleiste haben wollt, sage ich dazu natürlich nicht nein. Vielleicht dient es ja als Anregung für eure nächste Website.

::-webkit-scrollbar { width: 10px; background: #DDD; } 
::-webkit-scrollbar-thumb { background: #151515; border-radius: 5px; }

Wenn ihr die Scrollbars innerhalb der Website ändern wollt, zB. bei einzelnen Inhaltcontainern, die mehr Inhalt als Höhe haben, solltet ihr euch diese Anleitung durchlesen.

Und noch ein kleiner Tipp zuletzt: Um beim Twitter-Widget die Scrollbar wegzubekommen, einfach data-chrome="noscrollbar" in den Widgetcode einfügen. Ihr könnt auch noch weiter Designelemente damit anpassen, eine Dokumentation dazu gibt es hier.

Facebook Twitter WhatsApp

von Florian Schmidt

Gründer von Netzleben. Studiert IT System Engineering am Hasso-Plattner-Institut in Potsdam. Kauft viel zu viel Technik online ein. Liebt Kekse.

Hinterlasse einen Kommentar