Bildlaufleistenstil

Mit den Eigenschaften scrollbar-width und scrollbar-color können Sie den Stil von Bildlaufleisten festlegen.

Bramus

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.

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.

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.

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.

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.

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);
    }
}

Wenn 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. */
}