scrollbar

Eine kurze Geschichte der Scrollbar-Stillegung

1. Früher war das etwas, das nur Internet Explorer konnte (uralte Versionen) mit Dingen wie -ms-scrollbar-base-color. Diese existieren nicht mehr.
2. Dann stiegen WebKit-basierte Browser-Engines mit Dingen wie ::-webkit-scrollbar ein. Das ist es, was dieser Alamanac-Eintrag hauptsächlich abdeckt, da er heute im Safari/Chrome-Bereich funktioniert.
3. Standards haben endlich Einzug gehalten, und diese Styling-Optionen werden durch nicht-präfixierte Eigenschaften wie scrollbar-color und scrollbar-width abgedeckt.

---

Das Styling von Scrollbars für die Safari/Chrome-Welt ist hinter dem -webkit Vendor-Präfix verborgen.

Dieser Almanac-Eintrag ist ein Überblick. Für eine vollständigere Aufschlüsselung der Arbeit mit benutzerdefinierten Scrollbars 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-scrollbar-Familie von Eigenschaften besteht aus sieben verschiedenen Pseudo-Elementen, die zusammen ein vollständiges Scrollbar-UI-Element bilden

1. ::-webkit-scrollbar bezieht sich auf den Hintergrund des Balkens selbst. Er wird normalerweise von den anderen Elementen überdeckt
2. ::-webkit-scrollbar-button bezieht sich auf die Richtungstasten auf der Scrollbar
3. ::-webkit-scrollbar-track bezieht sich auf den leeren Raum „unterhalb“ des Fortschrittsbalkens
4. ::-webkit-scrollbar-track-piece ist die oberste Ebene des Fortschrittsbalkens, die nicht vom ziehbaren Scroll-Element (Daumen) bedeckt ist
5. ::-webkit-scrollbar-thumb bezieht sich auf das ziehbare Scroll-Element, dessen Größe sich je nach Größe des scrollbaren Elements ändert
6. ::-webkit-scrollbar-corner bezieht sich auf die (normalerweise) untere Ecke des scrollbaren Elements, wo sich zwei Scrollbars treffen könnten
7. ::-webkit-resizer bezieht sich auf den ziehbaren Größenänderungs-Griff, der über der scrollbar-corner in der unteren Ecke einiger Elemente erscheint

Zusätzlich zu diesen Pseudo-Elementen gibt es auch elf Pseudo-Klassen, die nicht erforderlich sind, den Designern aber die Möglichkeit geben, verschiedene Zustände und Interaktionen der Scrollbar-UI zu gestalten. Eine vollständige Aufschlüsselung dieser Pseudo-Selektoren und ein detailliertes Beispiel finden Sie in diesem CSS-Tricks-Artikel.

Hinweise zur Verwendung

• Wenn kein qualifizierender Selektor den verschiedenen Pseudo-Elementen vorangestellt ist, gelten die Stile für *jede* Scrollbar, die auf der Seite erscheinen könnte.
• Das Setzen von -webkit-scrollbar-Stilen ist eine gute Möglichkeit, Ihre Webseite dazu zu zwingen, horizontale oder vertikale Scrollbars auf neueren Mac OS-Versionen als Lion anzuzeigen, auf denen Scrollbars standardmäßig oft versteckt sind.
• Da diese Eigenschaft hinter einem -webkit Vendor-Präfix liegt, wurden mehrere jQuery-Plugins geschrieben, um diese Funktionalität für andere Browser zu „polyfillen“ oder zu erweitern. Ein solches Plugin ist jScrollPane.

Browser-Unterstützung

CSS-Tricks, die scrollbar verwenden

Nächste Schritte mit scrollbar

• Der aktuelle Stand der Scrollbar-Gestaltung (CSS-Tricks)
• Benutzerdefinierte Scrollbars in WebKit (CSS-Tricks)
• So passen Sie die Scrollbar des Browsers mit CSS an (DigitalOcean)
• Zwei Browser gingen in eine Scrollbar (Zach Leatherman)
• Surfin’ Safari: Scrollbars stylen (WebKit Blog)

Verwandt