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 der Scrollbalken 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 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 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 dabei ebenfalls gestalten kannst.

  • :horizontal
  • :vertical

 

Mit diesen Pseudo Klassen kannst du dazu 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 dazu 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 Browsern funktioniert. 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.