Scrollbar-Styler
Dieses Panel scrollen, um die gestaltete Scrollleiste zu sehen.
Jede Änderung unten wirkt hier sofort — mit denselben Deklarationen wie im CSS-Block.
Die Standardeigenschaften kommen zuerst, dann die WebKit-Pseudo-Elemente als Fallback für Browser, die sie nicht implementiert haben.
Firefox unterstützt scrollbar-width und scrollbar-color seit Jahren; Chrome und Safari haben sie später hinzugefügt und beachten die Pseudo-Elemente weiterhin.
Daumen und Leiste im Kontrast weit genug auseinanderhalten, damit das Bedienelement sichtbar bleibt — eine Scrollleiste ist ein interaktives Element.
Weiterscrollen.
Und noch weiter.
Ende des Beispielinhalts.
scrollbar-width Eigenschaft akzeptiert nur auto, thin oder none — keine Längenangabe.
Beide Syntaxen werden ausgegeben, da keine allein alle Browser abdeckt: scrollbar-width und scrollbar-color sind der Standard und der einzige Weg in Firefox, während die ::-webkit-scrollbar Pseudo-Elemente sind der einzige Weg, eine exakte Pixelbreite oder einen Eckenradius zu setzen. Gelten beide, gewinnen die Standardeigenschaften und die Pixelbreite wird ignoriert. Eine Scrollleiste ganz zu verstecken entfernt einen sichtbaren Hinweis — auf allem, was jemand finden muss, besser vermeiden.