Scrollbalken in Webkit Browsern gestalten

Mit Hilfe von CSS kannst du speziell die Scrollbalken in Webkit Browsern gestalten. Dies funktioniert nicht nur farblich, sondern auch optisch ganz individuell. In diesem Artikel zeige ich, wie du die Scrollbalken des Browsers anders gestalten kannst.

Allgemeines

Bevor wir uns nun hinsetzen und die Scrollbalken optisch verändern, noch ein kleiner Hinweis ganz zu Anfang. Diese CSS Pseudoklassen funktionieren nur in Browsern mit Webkit Engine. Die Bekanntesten Browser sind Chrome von Google und Safari von Apple. Internet Explorer und Firefox ignorieren diese Angaben, da diese Browser andere Render Engines verwenden.

Opera nutzt seit der Version 15 ebenfalls die Webkit Engine. Der Browser unterstütz den Code daher nur in Versionen größer oder gleich 15. Davor klappt es nicht.

Die Balken im Internet Explorer kannst du dennoch färben. Bitte schaue dir dazu den Artikel „Scrollbalken im Internet Explorer einfärben“ an.

Im Nachfolger Edge wird der Code künftig ebenfalls unterstützt. Microsoft stellt Edge im Laufe des Jahres 2019 ebenfalls auf eine Webkit Engine um.

Farbe, Breite und Rahmen der Scrollbalken individuell gestalten

Die nachstehenden Pseudo Elemente stehen für die Änderung von Farbe, Breite und Rahmen zur Verfügung. Mit ihnen kannst du die Scrollbalken in Webkit Browsern gestalten.

  • ::-webkit-scrollbar { }  (für den gesamten Scrollbalken)
  • ::-webkit-scrollbar-button { }  (für die Pfeile oben und unten)
  • ::-webkit-scrollbar-track { }  (für den Bereich des Schiebe-Reglers)
  • ::-webkit-scrollbar-thumb { }  (für den Regler)
  • ::-webkit-scrollbar-corner { }  (für den Größenregler, z.B. bei Textfeldern)

Diese Pseudo Elemente kannst du nun wie gewöhnliche HTML Elemente gestalten. Einziger Wermutstropfen: Derzeit lassen sich keine CSS Transitions (welche bspw. weiche Übergänge zwischen den Zuständen „hover“ und „active“ ermöglichen) anwenden.

Zusätzlich zu den oben genannten Pseudo Elementen gibt es noch zwei Pseudo Klassen, die du dabei ebenfalls gestalten kannst.

  • :horizontal
  • :vertical

Beispiel:

<style>
::-webkit-scrollbar {
 width: 35px;
 background: lightblue;
} 
::-webkit-scrollbar-thumb {
 border: 2px dotted red;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
 background: red;
}

::-webkit-scrollbar-thumb:active {
 background: green;
}
</style>

Anzeigebeispiel:

Folge einfach diesem Link (öffnet sich in einem neuen Fenster) um dir das Beispiel im Browser anzuschauen.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Brave 0.65.118
  • Google Chrome 24
  • Opera 18

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern mit Webkit Engine funktioniert.