CSS/Eigenschaften/scrollbar
Achtung!
Über den Stand des Scrollbar-Stylings im Jahr 2022 gibt es einen ausführlichen Artikel von Chris Coyier auf css-tricks.com[1].
Inhaltsverzeichnis
Firefox
Der Firefox-Browser unterstützt die Standardeigenschaften scrollbar-color und scrollbar-width.
Webkit-Browser (Chrome, Edge, Opera, Safari)
Für Webkit-Browser existiert eine proprietäre, nicht standardisierte Familie von Pseudoelementen[2].
::-webkit-scrollbar
- Setzt Styles für den gesamten Scrollbar und aktiviert das Scollbar-Styling. Wenn Sie für dieses Pseudoelement keine Style-Regel angeben, die eine für den Scrollbar relevante Eigenschaft (z.B.
width
,height
oderbackground-color
) setzt, werden die übrigen Scrollbar-Pseudoelemente ignoriert. ::-webkit-scrollbar-button
- Setzt Styles für die Buttons am Ende des Scrollbars
::-webkit-scrollbar-track
- Setzt Styles für die Schiebebahn des Knopfes
::-webkit-scrollbar-track-piece
- Setzt Styles für die Teile der Schiebebahn, die nicht vom Knopf verdeckt werden. Sagt der Blog. Tatsächlich ist es so, dass die beiden track pieces vor und hinter dem Knopf jeweils bis zur Mitte des Knopfes reichen. Wenn Sie die track pieces stylen, ist ein Styling des track nur noch dann sinnvoll, wenn die track pieces Transparenzen enthalten (z.B. ein Bild oder ein Gradient)
::-webkit-scrollbar-thumb
- Setzt Styles für den Schiebeknopf
::-webkit-scrollbar-corner
- Setzt Styles für den Eckverbinder zwischen horizontaler und vertikaler Scrollbar.
::-webkit-resizer
- Das Pseudoelement heißt
::-webkit-resizer
, nicht::-webkit-resize
, wie im Webkit-Blog geschrieben. Setzt Styles für das Resize-Handle eines Elements, dessen Größe veränderlich ist (was Sie mit der resize-Eigenschaft steuern können).
Sie können für diese Pseudoelemente Größenangaben setzen (beispielsweise für extrabreite Scrollbars), Ränder, Schatten, Farben, Hintergrundbilder „und so weiter“ ‐ schreibt der erwähnte Webkit-Blog. Wir haben keine Versuchsreihe gestartet, die die Möglichkeiten erkundet.
Außer diesen Pseudoelementen gibt es auch noch Webkit-Pseudoklassen, um bestimmte Fälle unterscheiden zu können.
:horizontal
- Trifft auf alle Scrollbar-Pseudoelemente zu, wenn der Scrollbar horizontal ist
:vertical
- Trifft auf alle Scrollbar-Pseudoelemente zu, wenn der Scrollbar vertikal ist
:decrement
- Trifft auf Buttons und Track Pieces zu, wenn sie den Wert des Scrollbars verringern („aufwärts“ bei einem vertikalen Scrollbar oder „links“ bei einem horizontalen Scrollbar)
:decrement
- Trifft auf Buttons und Track Pieces zu, wenn sie den Wert des Scrollbars erhöhen („abwärts“ bei einem vertikalen Scrollbar oder „rechts“ bei einem horizontalen Scrollbar)
:start
- Trifft auf Buttons und Track Pieces zu, wenn sie sich vor dem Thumb befinden. Wann das von
:decrement
abweicht, ist unklar. :end
- Trifft auf Buttons und Track Pieces zu, wenn sie sich hinter dem Thumb befinden. Wann das von
:increment
abweicht, ist unklar. :double-button
- Je nach Browser oder Betriebssystem kann ein Scrollbar so dargestellt werden, dass die Buttons nebeneinander am gleichen Ende des Scrollbars liegen. Ist das der Fall, trifft diese Pseudoklasse für die Buttons und das Track Piece zu, das an die Buttons angrenzt
:single-button
- Analog zu :double-button, für den Fall, dass die Buttons getrennt an den Enden des Scrollbars liegen. Für Track Pieces trifft die Klasse zu, wenn sie an einen :single-button angrenzen.
:no-button
- Trifft auf ein Track Piece zu, wenn auf seiner Seite des Scrollbars kein Button ist (d.h. auf der anderen Seite des Knopfes ist ein double-button).
:corner-present
- Trifft auf alle Scrollbar-Pseudoelemente zu, wenn eine scrollbar corner angezeigt wird.
:window-inactive
- Trifft auf alle Scrollbar-Pseudoelemente zu, wenn das Fenster, in dem sich der Scrollbar befindet, nicht aktiv ist.
Wissenswert ist noch:
- Die Pseudoklassen
:enabled
,:disabled
,:hover
und:active
lassen sich auf die Scrollbar-Pseudoelemente ebenfalls anwenden. - Mit
display:none
lassen sich einzelne Pseudoelemente ausblenden. - Margins sind in Richtung der Scollbar-Schieberichtung verwendbar. Mit negativen Werten können Sie zum Beispiel den Track in die Buttons hineinragen lassen (wobei es in den meisten Fällen besser sein dürfte, den gleichen Effekt durch das Verringern der Buttongröße zu erzielen).
Internet Explorer
Microsoft schuf für den Internet Explorer 5.5 eine Gruppe von scrollbar-Eigenschaften, um die Scrollleisten gestalten zu können. Sie waren nie standardisiert und sind mit dem Internet Explorer verschwunden, sollen hier aber der Vollständigkeit halber aufgeführt werden. Jede dieser Eigenschaften erwartete einen Farbwert wie #0000CC
oder green
. Anwendbar waren sie auf alle Elemente, die scrollbaren Inhalt besitzen können.
-
scrollbar-base-color: Wert;
: (Basisfarbe der Scroll-Leiste) -
scrollbar-3dlight-color: Wert;
: (Farbe für 3D-Effekte) -
scrollbar-arrow-color: Wert;
: (Farbe für Verschiebepfeile) -
scrollbar-darkshadow-color: Wert;
: (Farbe für Schatten) -
scrollbar-face-color: Wert;
: (Farbe für Oberfläche) -
scrollbar-highlight-color: Wert;
: (Farbe für oberen und linken Rand) -
scrollbar-shadow-color: Wert;
: (Farbe für unteren und rechten Rand) -
scrollbar-track-color: Wert;
: (Farbe für freibleibenden Verschiebeweg)
Quellen
- ↑ CSS-Tricks: The Current State of Styling Scrollbars in CSS (2022 Update), abgerufen am 25.05.2023
- ↑ Webkit Blog: Styling Scrollbars