Mit den Eigenschaften scrollbar-width
und scrollbar-color
können Sie Bildlaufleisten gestalten.
Einleitung
Ab Chrome-Version 2 war es möglich, Bildlaufleisten mit den Pseudoelementen ::-webkit-scrollbar-*
zu gestalten. Dieser Ansatz funktioniert in Chrome und Safari gut, wurde jedoch von der CSS-Arbeitsgruppe nie standardisiert.
Die Attribute scrollbar-width
und scrollbar-color
wurden standardisiert, die Teil der Spezifikation des CSS-Bildlaufleisten Styling-Moduls – Stufe 1 sind. Diese Eigenschaften werden ab Chrome 121 unterstützt.
Bildlaufleisten 101
Aufbau einer Bildlaufleiste
Eine Bildlaufleiste besteht mindestens aus einem Track und einem Daumen. Die Spur ist der Bereich, in dem sich der Daumen bewegen kann. Der Track stellt die gesamte Scroll-Distanz dar. Der Daumen stellt die aktuelle Position innerhalb des scrollbaren Bereichs dar. Beim Scrollen bewegt es sich innerhalb des Tracks. Der Daumen kann häufig auch gezogen werden.
Bildlaufleisten können jedoch aus mehr Teilen als nur Daumen und Spurweite bestehen. Eine Bildlaufleiste könnte beispielsweise eine oder mehrere Schaltflächen enthalten, mit denen der Scrollversatz erhöht oder verringert werden kann. Die Bestandteile einer Bildlaufleiste werden vom zugrunde liegenden Betriebssystem bestimmt.
Klassische und Overlay-Bildlaufleisten
Bevor wir uns mit dem Gestalten von Bildlaufleisten beschäftigen, ist es wichtig, den Unterschied zwischen zwei Arten von Bildlaufleisten zu verstehen.
Overlay-Bildlaufleisten
Overlay-Bildlaufleisten sind unverankerte Bildlaufleisten, die über dem darunter liegenden Inhalt gerendert werden. Sie werden nicht standardmäßig angezeigt, sondern nur, während Sie aktiv scrollen. Damit die darunterliegenden Inhalte sichtbar bleiben, sind sie oft halbtransparent. Das entscheidet jedoch das Betriebssystem. Während der Interaktion kann auch ihre Größe variieren.
Klassische Bildlaufleisten
Klassische Bildlaufleisten sind Bildlaufleisten, die in einem speziellen Bildlaufleisten-Gutter platziert werden. Der Spaltenabstand für die Bildlaufleiste ist der Abstand zwischen dem inneren Rand und dem äußeren Rand. Diese Bildlaufleisten sind normalerweise undurchsichtig (nicht transparent) und nehmen etwas Platz weg vom benachbarten Inhalt.
Die Attribute scrollbar-color
und scrollbar-width
Bildlaufleisten mit scrollbar-color
färben
Mit der Eigenschaft scrollbar-color
können Sie das Farbschema von Bildlaufleisten ändern. Die Eigenschaft akzeptiert zwei Werte für <color>
. Der erste <color>
-Wert bestimmt die Farbe des Daumens und der zweite Wert die Farbe, die für den Track verwendet werden soll.
.scroller {
scrollbar-color: hotpink blue;
}
Bei Verwendung einer Overlay-Bildlaufleiste hat die Farbe des Tracks standardmäßig keinen Einfluss. Bewegst du den Mauszeiger auf die Bildlaufleiste, wird der Track jedoch angezeigt.
Wenn Sie das vom Betriebssystem bereitgestellte Standardrendering verwenden möchten, verwenden Sie auto
als Wert.
Größe der Bildlaufleiste mit scrollbar-width
ändern
Mit der Eigenschaft scrollbar-width
können Sie eine schmalere Bildlaufleiste auswählen oder die Bildlaufleiste sogar vollständig ausblenden, ohne dass die Scrollbarkeit beeinträchtigt wird.
Zulässige Werte sind auto
, thin
und none
.
auto
: Die von der Plattform angegebene Standardbreite der Bildlaufleiste.thin
: Eine schmale Bildlaufleiste, die von der Plattform zur Verfügung gestellt wird, oder eine benutzerdefinierte Bildlaufleiste, die dünner ist als die Standard-Bildlaufleiste der Plattform.none
: Blendet die Bildlaufleiste aus. Das Element kann jedoch weiterhin gescrollt werden.
Ein <length>
wie 16px
kann nicht als Wert für scrollbar-width
verwendet werden.
.scroller {
scrollbar-width: thin;
}
Bei Verwendung einer Overlay-Bildlaufleiste wird der Daumen nur gezeichnet, während Sie aktiv durch den scrollbaren Bereich scrollen.
Unterstützung älterer Browserversionen
Bei Browserversionen, die scrollbar-color
und scrollbar-width
nicht unterstützen, ist es möglich, sowohl die neuen Properties scrollbar-*
als auch die ::-webkit-scrollbar-*
zu verwenden.
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
Wenn du width
oder height
von ::-webkit-scrollbar
festlegst, wird immer eine Overlay-Bildlaufleiste angezeigt, die sich praktisch in eine klassische Bildlaufleiste verwandelt.
Um die Täuschung zu bewahren, können Sie festlegen, dass die Farben nur geändert werden, wenn Sie den Mauszeiger über den Scroller bewegen.
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}