Scrollbars sind natürliche Fortschrittsanzeigen. Wie weit die Scrollbar nach unten oder zur Seite reicht, ist der Fortschritt beim Scrollen durch dieses Element (oft die gesamte Seite). Sie sind jedoch eher Fortschrittsanzeiger als Anzeigen, wenn man eine Anzeige als etwas betrachtet, das sich beim Fortschritt "auffüllt".
Wir können mit etwas CSS-Trickerei dafür sorgen, dass sich die Scrollbar beim Fortschritt auffüllt.
Dies funktioniert nur mit -webkit- herstellerspezifisch präfigierten Scrollbar-Styling-Eigenschaften. Mit anderen Worten, diese sind nicht standardisiert. Die standardisierten Scrollbar-Styling-Eigenschaften sind scrollbar-width und scrollbar-color, die diese Art von Dingen nicht bewältigen können, aber wahrscheinlich auf lange Sicht sicherer sind. Dennoch werden die herstellerspezifisch präfigierten Versionen wahrscheinlich nicht verschwinden, also ist es wahrscheinlich in Ordnung, wenn Sie dies als eine seltsame Form der progressiven Verbesserung betrachten.
Was ist der Trick?
Im Wesentlichen wird ein riesiger box-shadow am oberen Rand des Scrollbar-Daumens angebracht – oder an der Seite, wenn es sich um ein horizontal scrollendes Element handelt.
:root {
--shadow: #43a047;
--scrollbarBG: #eee;
--thumbBG: #66bb6a;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
background-color: var(--thumbBG);
box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 15px 5px black;
}Demo
Dies habe ich zuerst in einem Pen von Myk gesehen.
Dieses Beispiel hat den Daumenteil der Scrollbar überhaupt nicht differenziert, was es eher wie eine Anzeige macht, aber auch schwieriger zu bedienen. Meine Demo hat einen Daumen mit einer leicht anderen Farbe.
Kann ich das wirklich nutzen?
Nein! Abgesehen davon, dass es super seltsam und nicht standardmäßig ist. Safari dreht durch und ich habe keine Ahnung, wie ich das beheben kann.
Ich habe jedoch einen Lieblings-CSS-Trick, der damit eng verwandt ist.
Ich möchte mehr über das Styling von Scrollbars erfahren
Klar, hier ist es.
Versuchte stattdessen
filterzu verwenden, aber diese Eigenschaft scheint bei Scrollbars ungültig zu sein. Eine Kette vonbox-shadows scheint ziemlich effektiv, aber sehr zerbrechlich zu sein, wenn der Inhalt sehr hoch ist (eine Sass-Schleife zum Hinzufügen eines Schattens für jedevh-Einheit von 1 bis 100 ist wahrscheinlich etwas übertrieben): CodePen-Demo (die übrigens immer noch auf Safari kaputt ist, nur ein kleines bisschen weniger, schätze ich?).Cool, diese hier ist einfacher
sieht so aus, als ob es im neuesten Firefox (FF 75.0) nicht funktioniert