Bildlaufleistenstil

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

Bramus

Einführung

Seit Chrome-Version 2 ist es möglich, Bildlaufleisten mit den Pseudoelementen ::-webkit-scrollbar-* zu stylen. Dieser Ansatz funktioniert in Chrome und Safari problemlos, wurde jedoch von der CSS Working Group nie standardisiert.

Die Eigenschaften scrollbar-width und scrollbar-color wurden jedoch standardisiert. Sie sind Teil der Spezifikation für das CSS-Modul „Scrollbars Styling“ (Level 1). Diese Properties werden ab Chrome 121 unterstützt.

Unterstützte Browser

• 121
• 121
• 64
• x

Quelle

Scrollleisten – Grundlagen

Scrollleiste

Eine Bildlaufleiste besteht mindestens aus einem Scrollbereich und einem Schieberegler. Der Track ist der Bereich, in dem sich der Daumen bewegen kann. Der Track steht für die gesamte Scrollstrecke. Der Schieberegler steht für die aktuelle Position im scrollbaren Bereich. Beim Scrollen bewegt sich der Text innerhalb des Tracks. Auch der Daumen ist häufig ziehbar.

Scrollleisten können jedoch mehr Teile als nur den Schieberegler und den Scrollbereich haben. Eine Bildlaufleiste könnte beispielsweise eine oder mehrere Schaltflächen haben, mit denen sich der Bildlaufversatz erhöhen oder verringern lässt. Die Bestandteile einer Bildlaufleiste werden vom zugrunde liegenden Betriebssystem bestimmt.

Abbildung der Teile einer Bildlaufleiste. Die Abbildung auf der linken Seite zeigt eine scrollbare Leiste mit nur einem Scrollbereich und einem Schieberegler. Die rechte hat auch Schaltflächen.

Klassische Bildlaufleisten und Overlay-Bildlaufleisten

Bevor wir uns damit befassen, wie Sie Bildlaufleisten stylen, ist es wichtig, den Unterschied zwischen zwei Arten von Bildlaufleisten zu kennen.

Bildlaufleisten überlagern

Overlay-Bildlaufleisten sind schwebende Bildlaufleisten, die über den darunter liegenden Inhalten gerendert werden. Sie werden nicht standardmäßig angezeigt, sondern nur, wenn 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. Die Bildlaufleiste überlagert den Inhalt; der Schieberegler ist teilweise transparent.

Klassische Bildlaufleisten

Klassische Bildlaufleisten sind Bildlaufleisten, die in einem speziellen Bildlaufleisten-Abstand platziert werden. Der Spaltenabstand der Bildlaufleiste ist der Abstand zwischen dem inneren Rand des Rahmens und dem äußeren Rand des Abstands. Diese Bildlaufleisten sind in der Regel undurchsichtig (nicht transparent) und nehmen etwas Platz von den nebenstehenden Inhalten weg.

Abbildung eines Browsers mit einer klassischen Bildlaufleiste. Die Bildlaufleiste ist neben den Inhalten in einem eigenen Bereich positioniert. Die verfügbare Breite der Inhalte ist im Vergleich zur verfügbaren Breite bei Verwendung von Overlay-Bildlaufleisten kleiner.

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 Bildlaufleisten ä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 für den Titel.

.scroller {
  scrollbar-color: hotpink blue;
}

Wenn Sie eine Overlay-Bildlaufleiste verwenden, hat die Farbe des Tracks standardmäßig keine Auswirkungen. Wenn Sie jedoch den Mauszeiger auf die Bildlaufleiste bewegen, wird der Titel angezeigt.

Demo: Scrollbalken stylen: scrollbar-color

Wenn Sie das vom Betriebssystem bereitgestellte Standard-Rendering verwenden möchten, geben Sie auto als Wert an.

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

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

Zulässige Werte sind auto, thin und none.

• auto: Die Standardbreite der Bildlaufleiste, die von der Plattform bereitgestellt wird.
• 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: Die Bildlaufleiste wird effektiv ausgeblendet. Das Element kann jedoch weiterhin gescrollt werden.

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

.scroller {
  scrollbar-width: thin;
}

Bei einer Overlay-Bildlaufleiste wird der Schieberegler nur dann gezeichnet, wenn Sie den scrollbaren Bereich aktiv scrollen.

Demo: Scrollbalken stylen: 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);
    }
}

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

Wenn Sie die width oder height von ::-webkit-scrollbar festlegen, wird immer eine Overlay-Bildlaufleiste angezeigt, die sie in eine klassische Bildlaufleiste verwandelt.

Um die Illusion aufrechtzuerhalten, können Sie festlegen, dass die Farben nur beim Bewegen des Mauszeigers auf dem Scroller geändert werden.

.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: Scrollbalken mit scrollbar-* mit einem Fallback auf ::-webkit-scrollbar-* stylen, wobei die ::-webkit-scrollbar-*-Farben nur beim Hovern angewendet werden