Mit den Eigenschaften scrollbar-width
und scrollbar-color
können Sie den Stil von Bildlaufleisten festlegen.
Einleitung
Seit Chrome-Version 2 ist es möglich, Bildlaufleisten mit den Pseudoelementen ::-webkit-scrollbar-*
zu gestalten. Dieser Ansatz funktioniert in Chrome und Safari problemlos, wurde jedoch von der CSS Working Group nie standardisiert.
Die Attribute scrollbar-width
und scrollbar-color
sind Teil der Spezifikation des CSS-Bildlaufleistes Styling Module Level 1. Diese Eigenschaften werden ab Chrome 121 unterstützt.
Bildlaufleisten 101
Aufbau einer Bildlaufleiste
Eine Bildlaufleiste muss mindestens aus einem Track und einem Daumen bestehen. Der Track ist der Bereich, in dem sich der Daumen bewegen kann. Der Track repräsentiert die gesamte Scrollstrecke. Der Daumen stellt die aktuelle Position innerhalb des scrollbaren Bereichs dar. Beim Scrollen bewegt sich der Text innerhalb des Tracks. Auch der Daumen ist häufig ziehbar.
Bildlaufleisten können jedoch mehr Elemente als nur Daumen und Track enthalten. Zum Beispiel könnte eine Bildlaufleiste eine oder mehrere Schaltflächen zum Erhöhen oder Verringern des Scroll-Offsets enthalten. Die Komponenten, aus denen eine Bildlaufleiste besteht, werden vom zugrunde liegenden Betriebssystem bestimmt.
![Abbildung der Teile, aus denen eine Bildlaufleiste besteht.](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-1.png?authuser=6&hl=de)
Klassische Bildlaufleisten und Overlay-Bildlaufleisten
Bevor wir uns damit befassen, wie Bildlaufleisten gestaltet werden, 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 der darunterliegende Inhalt sichtbar bleibt, sind sie oft halbtransparent. Das muss aber dem Betriebssystem überlassen werden. Bei der Interaktion mit ihnen kann auch ihre Größe variieren.
![Abbildung eines Browsers mit einer Overlay-Bildlaufleiste](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-2.png?authuser=6&hl=de)
Klassische Bildlaufleisten
Klassische Bildlaufleisten sind Bildlaufleisten, die in einem eigenen Bildlaufleistenabstand platziert werden. Der Spaltenabstand der Bildlaufleiste ist der Abstand zwischen dem inneren Rand und dem äußeren Rand. Diese Bildlaufleisten sind in der Regel undurchsichtig (nicht transparent) und nehmen etwas Platz vom angrenzenden Inhalt ein.
![Abbildung eines Browsers mit einer klassischen Bildlaufleiste.](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-3.png?authuser=6&hl=de)
Die Attribute scrollbar-color
und scrollbar-width
Farbe für Bildlaufleisten mit scrollbar-color
geben
Mit der Eigenschaft scrollbar-color
können Sie das Farbschema von Bildlaufleisten ändern. Das Attribut akzeptiert zwei <color>
-Werte. Der erste <color>
-Wert bestimmt die Farbe für den Daumen und der zweite Wert die Farbe, die für den Titel verwendet werden soll.
.scroller {
scrollbar-color: hotpink blue;
}
Bei Verwendung einer Overlay-Bildlaufleiste hat die Farbe des Tracks standardmäßig keine Auswirkung. Wenn Sie jedoch den Mauszeiger auf die Bildlaufleiste bewegen, wird der Track angezeigt.
scrollbar-color
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 das Scrollen zu beeinträchtigen.
Zulässige Werte sind auto
, thin
und none
.
auto
: Die von der Plattform vorgegebene Standard-Bildlaufleistenbreite.thin
: Eine dünne Variante der von der Plattform zur Verfügung gestellten Bildlaufleiste oder eine benutzerdefinierte Bildlaufleiste, die dünner als die standardmäßige Bildlaufleiste der Plattform ist.none
: Blendet die Bildlaufleiste effektiv aus. Das Element kann jedoch weiterhin gescrollt werden.
<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, wenn Sie aktiv im scrollbaren Bereich scrollen.
scrollbar-width
Unterstützung älterer Browserversionen
Für Browserversionen, die scrollbar-color
und scrollbar-width
nicht unterstützen, können Sie die neuen Properties scrollbar-*
und ::-webkit-scrollbar-*
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);
}
}
scrollbar-*
mit einem Fallback auf ::-webkit-scrollbar-*
gestaltenWenn Sie „width
“ oder „height
“ von ::-webkit-scrollbar
festlegen, wird immer eine Overlay-Bildlaufleiste eingeblendet, die sie in eine klassische Bildlaufleiste verwandelt.
Um die Illusion beizubehalten, können Sie festlegen, dass die Farben nur geändert werden, wenn Sie den Mauszeiger auf den Bildlauf 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. */
}
scrollbar-*
mit einem Fallback auf ::-webkit-scrollbar-*
, wobei die Farben ::-webkit-scrollbar-*
nur angewendet werden, wenn der Mauszeiger darauf bewegt wird