CSS/Eigenschaften/scrollbar

Achtung!

Die standardisierten Eigenschaften zum Beeinflussen von Scrollbars heißen

• scrollbar-color
• scrollbar-width

Sie werden zur Zeit (Mai 2023) nur vom Firefox-Browser unterstützt. Wenn Sie die Darstellung von Scrollbars verändern möchten, sollten Sie diese beiden Eigenschaften vorrangig setzen.

Über den Stand des Scrollbar-Stylings im Jahr 2022 gibt es einen ausführlichen Artikel von Chris Coyier auf css-tricks.com.

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.

::-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 oder background-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)