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?
Dieser Artikel wurde zuletzt vor über einem Jahr aktualisiert. Die Inhalte könnten inzwischen nicht mehr aktuell sein.
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.
- # CSS
- # Webentwicklung