Bildlaufleiste - CSS-Tricks | CSS-Almanach 2025

Eine kurze Geschichte des Stils von Bildlaufleisten:

Früher war es eine Sache, die nur Internet Explorer (alte Versionen) mit Dingen wie tun konnte -ms-scrollbar-base-color. Diese existieren nicht mehr.
Dann stiegen WebKit-basierte Browser-Engines mit Dingen wie ein ::-webkit-scrollbar. Das ist es, was dieser Alamanac-Eintrag hauptsächlich abdeckt, da er heute in der gesamten Safari / Chrome-Landschaft funktioniert.
Endlich wurden Standards eingeführt, und diese Stiloptionen werden durch nicht vorangestellte Eigenschaften wie Bildlaufleistenfarbe und Bildlaufleistenbreite abgedeckt.

Das Styling von Bildlaufleisten für die Safari / Chrome-Welt wird hinter dem -webkitHerstellerpräfix angezeigt.

Dieser Almanach-Eintrag ist eine Übersicht. Für eine umfassendere Aufschlüsselung der Arbeit mit benutzerdefinierten Bildlaufleisten lesen Sie bitte diesen CSS-Tricks-Artikel.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

Die -webkit-scrollbarFamilie der Eigenschaften besteht aus sieben verschiedenen Pseudoelementen, die zusammen ein vollständiges Element der Bildlaufleisten-Benutzeroberfläche bilden:

::-webkit-scrollbarAdressiert den Hintergrund der Leiste selbst. Es wird normalerweise von den anderen Elementen abgedeckt
::-webkit-scrollbar-button Adressiert die Richtungstasten in der Bildlaufleiste
::-webkit-scrollbar-track Adressiert den leeren Bereich "unter" dem Fortschrittsbalken
::-webkit-scrollbar-track-piece ist die oberste Ebene des Fortschrittsbalkens, die nicht vom ziehbaren Bildlaufelement (Daumen) abgedeckt wird.
::-webkit-scrollbar-thumb Adressiert das ziehbare Bildlaufelement, dessen Größe abhängig von der Größe des Bildlaufelements geändert wird
::-webkit-scrollbar-corner Adressiert die (normalerweise) untere Ecke des scrollbaren Elements, in der sich möglicherweise zwei Bildlaufleisten treffen
::-webkit-resizerAdressiert den ziehbaren Größenänderungsgriff, der über scrollbar-cornerder unteren Ecke einiger Elemente angezeigt wird

Zusätzlich zu diesen Pseudoelementen gibt es elf Pseudoauswahlklassen, die nicht erforderlich sind, aber Designern die Möglichkeit bieten, verschiedene Zustände und Interaktionen der Benutzeroberfläche der Bildlaufleiste zu gestalten. Eine vollständige Aufschlüsselung dieser Pseudo-Selektoren und ein detailliertes Beispiel finden Sie in diesem CSS-Tricks-Artikel.

Schauen Sie sich diesen Stift an!

Sehenswürdigkeiten

Wenn vor den verschiedenen Pseudoelementen kein qualifizierender Selektor steht, gelten die Stile für alle Bildlaufleisten, die möglicherweise auf der Seite angezeigt werden.
Das Festlegen von -webkit-scrollbarStilen ist eine gute Möglichkeit, um zu erzwingen, dass auf Ihrer Webseite horizontale oder vertikale Bildlaufleisten in Versionen von Mac OS angezeigt werden, die neuer als Lion sind und in denen Bildlaufleisten normalerweise standardmäßig ausgeblendet sind.
Da sich diese Eigenschaft hinter einem -webkitHerstellerpräfix befindet, wurden mehrere jQuery-Plugins in "polyfill" geschrieben oder diese Funktionalität auf andere Browser erweitert. Ein solches Plugin ist jScrollPane.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.