Denis Potschien 15. November 2012

CSS: Scrollleisten in Chrome individuell gestalten

Vom Internet Explorer kannte man die Möglichkeit bereits, die Scrollleisten des Browsers individuell anzupassen. Bereits seit der uralten Version 5.5 ist es möglich, die Farbe der Leiste und ihrer Bestandteile zu ändern. Mittlerweile erlauben Webkit-Browser (beispielsweise Chrome und Safari) ebenfalls, die Leisten zu individualisieren. Allerdings geht Webkit hier noch einen Schritt weiter – nicht nur die Farbe lässt sich ändern.


Beispiele für individuelle Scrollleisten

Farbe, Breite, Rahmen

Verschiedene Pseudoelemente können verwendet werden, um alle Bestandteile der Scrollleiste ganz individuell zu gestalten. Wie bei normalen HTML-Elementen auch besteht die Möglichkeit, die Hintergrund- und Vordergrundfarbe sowie den Rahmen anzupassen. Selbst gepunktete und abgerundete Scrollbar-Tracks sowie Hintergrundgrafiken können erstellt bzw. implementiert werden.

Folgende Pseudoelemente stehen zum Anpassen zur Verfügung:

::-webkit-scrollbar { } /* gesamte Scrolleiste */
::-webkit-scrollbar-button { } /* Pfeil-Buttons */
::-webkit-scrollbar-track { } /* Bereich für den Schieberegler */
::-webkit-scrollbar-thumb { } /* Schieberegler */
::-webkit-scrollbar-corner { } /* Größenregler (bei TEXTAREA sichtbar) */

Wie gewöhnliche HTML-Elemente kann man die einzelnen Pseudoelemente nun gestalten:

::-webkit-scrollbar {
  width: 20px;
  background: yellow;
}
::-webkit-scrollbar-thumb {
  border: 2px dotted green;
  border-radius: 10px;
}

Das Beispiel färbt den gesamten Bereich für die Scrollbar gelb ein und setzt ihn auf eine Breite von 20 Pixel. Der Schieberegler wird mit einer grünen gepunkteten Linie versehen und erhält abgerundete Ecken. Zusätzlich kann man mit entsprechenden Pseudoklassen das Aussehen bei Interaktion mit der Maus verändern:

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

Nur eine Sache beherrschen die Pseudoelemente nicht: Es lassen sich keine CSS3-Transitions anwenden. Weiche Übergänge zwischen den Zuständen („hover“ und „active“) sind – zumindest derzeit – nicht möglich. Ansonsten sind der Kreativität keine Grenzen gesetzt. Von dezent bis schillernd bunt ist alles machbar.

Zusätzliche Pseudoklassen

Wer möchte, kann mit zusätzlichen Pseudoklassen das Aussehen weiter individualisieren. So gibt es die Klasse „:inactive-window“, mit der das Aussehen jedes Pseudoelementes für ein inaktives Fenster angepasst werden kann. Die beiden Klassen „:horizontal“ und „:vertical“ erlauben die unterschiedliche Gestaltung horizontaler und vertikaler Leisten:

::-webkit-scrollbar-thumb:horizontal {
  height: 12px;
}

Fazit: Gerade für mehrzeilige Formularfelder ist es schön, wenn diese gestalterisch ans Seitenlayout angepasst werden können. Hier bieten die Webkit-Browser mit den Pseudoelementen interessante Möglichkeiten.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Hallo,

    wie kann man die Leiste wieder automatisch ausblenden lassen… das geht nachher nicht mehr in Safari auf OS X

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.