Bildlaufleistenstil

Mit den Eigenschaften scrollbar-width und scrollbar-color können Sie Bildlaufleisten gestalten.

Bramus

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.

Unterstützte Browser

• 121
• 121
• 64
• x

Quelle

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.

Illustration der Teile, aus denen eine Bildlaufleiste besteht. Die Abbildung auf der linken Seite ist eine Bildlaufleiste mit nur einem Track und einem Daumen. Auf der rechten Seite befinden sich ebenfalls Tasten.

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.

Abbildung eines Browsers mit Overlay-Bildlaufleiste. Die Bildlaufleiste überlagert den Inhalt; der Daumen ist teilweise transparent.

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.

Abbildung eines Browsers mit klassischer Bildlaufleiste. Die Bildlaufleiste wird neben dem Inhalt in einem eigenen Bereich positioniert. Die verfügbare Breite des Inhalts wird im Vergleich zur verfügbaren Breite verkleinert, wenn Overlay-Bildlaufleisten verwendet werden.

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.

Demo: Bildlaufleisten gestalten: 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 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.

Demo: Bildlaufleisten gestalten: scrollbar-width

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

Demo: Bildlaufleisten mithilfe von scrollbar-* mit einem Fallback auf ::-webkit-scrollbar-* gestalten

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

Demo: Bildlaufleisten mit scrollbar-* mit einem Fallback auf ::-webkit-scrollbar-* gestalten, wobei nur die Farben ::-webkit-scrollbar-* angewendet werden, wenn der Mauszeiger darauf bewegt wird