Bildlaufleistenstil

Verwenden Sie die Attribute scrollbar-width und scrollbar-color, um Scrollbalken zu gestalten.

Bramus

Einführung

Seit Chrome 2 ist es möglich, Scrollleisten mit den ::-webkit-scrollbar-*-Pseudoelementen zu gestalten. Diese Vorgehensweise funktioniert in Chrome und Safari gut, wurde aber nie von der CSS Working Group standardisiert.

Standardisiert wurden die Attribute scrollbar-width und scrollbar-color, die Teil der CSS Scrollbars Styling Module Level 1 Specification sind. Diese Eigenschaften werden ab Chrome 121 unterstützt.

Scrollbalken – Grundlagen

Aufbau einer Scrollleiste

Eine Scrollleiste besteht mindestens aus einem Track und einem Ziehpunkt. Die Spur ist der Bereich, in dem sich der Daumen bewegen kann. Die Spur stellt die gesamte Scrollstrecke dar. Der Ziehpunkt stellt die aktuelle Position im scrollbaren Bereich dar. Beim Scrollen bewegt sich die Markierung auf dem Track. Der Thumb kann oft auch gezogen werden.

Scrollbalken können jedoch mehr Teile als nur den Ziehpunkt und die Leiste haben. Eine Scrollleiste kann beispielsweise eine oder mehrere Schaltflächen zum Erhöhen oder Verringern des Scroll-Offsets haben. Die Bestandteile einer Scrollleiste werden vom zugrunde liegenden Betriebssystem bestimmt.

Klassische und Overlay-Bildlaufleisten

Bevor Sie sich ansehen, wie Scrollbalken gestaltet werden, ist es wichtig, den Unterschied zwischen zwei Arten von Scrollbalken zu verstehen.

Bildlaufleisten überlagern

Overlay-Scrollbalken sind Floating-Scrollbalken, die über dem darunterliegenden Inhalt gerendert werden. Sie werden nicht standardmäßig angezeigt, sondern nur, wenn Sie aktiv scrollen. Damit die darunterliegenden Inhalte sichtbar bleiben, sind sie oft halbtransparent. Das hängt jedoch vom Betriebssystem ab. Auch die Größe kann variieren.

Klassische Bildlaufleisten

Klassische Scrollbalken werden in einer separaten Scrollbalkenrinne platziert. Die Scrollleistenrinne ist der Bereich zwischen dem inneren Rahmenrand und dem äußeren Padding-Rand. Diese Scrollbalken sind in der Regel undurchsichtig (nicht transparent) und nehmen etwas Platz von den angrenzenden Inhalten ein.

Die Attribute scrollbar-color und scrollbar-width

Scrollbalken mit scrollbar-color eine Farbe zuweisen

Mit der Eigenschaft scrollbar-color können Sie das Farbschema von Scrollleisten ändern. Für das Attribut sind zwei <color>-Werte zulässig. Der erste <color>-Wert bestimmt die Farbe des Thumbnails und der zweite die Farbe, die für den Track verwendet werden soll.

.scroller {
  scrollbar-color: hotpink blue;
}

Wenn Sie eine Overlay-Scrollleiste verwenden, hat die Farbe des Tracks standardmäßig keine Auswirkungen. Wenn Sie jedoch mit dem Mauszeiger auf die Scrollleiste zeigen, wird der Track angezeigt.

Wenn Sie das Standardrendering des Betriebssystems verwenden möchten, geben Sie auto als Wert an.

Größe der Scrollleiste mit scrollbar-width ändern

Mit der scrollbar-width-Eigenschaft können Sie eine schmalere Scrollleiste auswählen oder die Scrollleiste sogar vollständig ausblenden, ohne die Scrollbarkeit zu beeinträchtigen.

Zulässige Werte sind auto, thin und none.

• auto: Die standardmäßige Breite der Scrollleiste, die von der Plattform bereitgestellt wird.
• thin: Eine schmale Variante der Bildlaufleiste, die von der Plattform bereitgestellt wird, oder eine benutzerdefinierte Bildlaufleiste, die schmaler als die Standard-Bildlaufleiste der Plattform ist.
• none: Blendet die Scrollleiste effektiv aus. Das Element kann aber weiterhin gescrollt werden.

Es ist nicht möglich, einen <length> wie 16px als Wert für scrollbar-width zu verwenden.

.scroller {
  scrollbar-width: thin;
}

Wenn Sie eine Overlay-Scrollleiste verwenden, wird der Ziehpunkt nur gezeichnet, wenn Sie den scrollbaren Bereich aktiv scrollen.

Unterstützung älterer Browserversionen

Für Browserversionen, die scrollbar-color und scrollbar-width nicht unterstützen, können Sie sowohl die neuen Attribute scrollbar-* als auch ::-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 die width oder height von ::-webkit-scrollbar festlegen, wird immer eine Overlay-Scrollleiste angezeigt, wodurch sie effektiv in eine klassische Scrollleiste umgewandelt wird.

Damit die Illusion erhalten bleibt, können Sie die Farben nur ändern, wenn Sie 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. */
}