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, welche die Webkit Engine verwenden. 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. In Versionen vor Version 15 sollten daher diese Befehle ebenfalls nicht funktionieren.

 

 

Farbe, Breite und Rahmen individuell gestalten

Die nachstehenden Pseudo-Elemente stehen für die Änderung von Farbe, Breite und Rahmen zur Verfügung:

  • ::-webkit-scrollbar { }  (für den gesamten Scrollbalken)
  • ::-webkit-scrollbar-button { }  (für die Pfeil-Buttons)
  • ::-webkit-scrollbar-track { }  (für den Bereich des Schiebe-Reglers)
  • ::-webkit-scrollbar-thumb { }  (für den Schiebe-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 z.B. 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 ebenfalls gestalten kannst.

  • :horizontal
  • :vertical

 

Mit diesen Pseudo-Klassen kann man noch zwischen horizontalen und vertikalen Scrollbalken unterscheiden und diese unterschiedlich gestalten.

 

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 anzeigen

 

Browser-Kompatibilität

Dieses Script habe ich in folgenden Browsern getestet:

  • Google Chrome 24
  • Opera 18

In den genannten Browsern funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen funktionieren. Auch habe ich das Script nicht in anderen Webkit Browsern außer den genannten getestet.

 


Dir gefällt dieser Artikel?

Ein Gedanke zu „Scrollbalken in Webkit-Browsern gestalten

  • 28. Mai 2017 um 08:31
    Permalink

    Dieser Artikel hat mir sehr geholfen!

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.