CSS Scrollbar mit Fortschrittsmesser

Der Scrollbalken selbst ist ein natürlicher Fortschrittsindikator. Die Position der Bildlaufleiste spiegelt direkt den Scroll -Fortschritt des Bildlaufelements (normalerweise die gesamte Seite) wider. Aber es ist eher ein Fortschrittsindikator als eine "füllbare" Fortschrittsleiste.

Wir können einige CSS -Techniken verwenden, um die Bildlaufleiste beim Scrollen "füllen" zu lassen.

Dies gilt jedoch nur für Eigenschaften im Scrollbar -Stil mit -webkit- -Präfix. Mit anderen Worten, diese Attribute sind nicht standardmäßig. Standardisierte Eigenschaften im Bildlaufbuhlstil sind scrollbar-width und scrollbar-color , die diesen Effekt nicht erreichen können, aber auf lange Sicht sicherer sein können. Trotzdem kann die Version mit dem Präfix des Anbieters nicht verschwinden. Wenn Sie also der Meinung sind, dass dies eine seltsame Form der progressiven Verbesserung ist, kann dies auch in Ordnung sein.

Was sind die Fähigkeiten?

Im Wesentlichen erfolgt dies durch Hinzufügen eines riesigen box-shadow an die Oberseite des Scrollbar-Schiebers (oder der Seite des horizontalen Scrolling-Elements).

 :Wurzel {
  -Shadow: #43A047;
  -crollbarbg: #eee;
  -Thumbbg: #66bb6a;
}
::-webkit-scrollbar {
  Breite: 16px;
}
::-webkit-scrollbar-Track {
  Hintergrund: var (-Scrollbarbg);
}
::-webkit-scrollbar-Daumen {
  Hintergrundfarbe: var (-Thumbbg);
  Box-Shadow: 0 -100VH 0 100VH var (-Schatten), 0 0 15px 5px schwarz;
}

Demo

Das erste Mal, als ich das sah, war dies in einem Stift in Myk.

Dieses Beispiel unterscheidet den Slider -Teil der Bildlaufleiste überhaupt nicht, was es eher zu einem Fortschrittsbalken, aber auch schwerer zu bedienen macht. Meine Demo verwendet einen etwas anderen Farbschieberegler.

Kann ich das wirklich verwenden?

nicht! Abgesehen von seiner sehr seltsamen und nicht standardmäßigen. Der Safari -Browser stürzt und ich weiß nicht, wie ich es beheben soll.

Ich habe jedoch einen sehr relevanten CSS -Trick.

Ich möchte mehr über Scrollbar -Stile erfahren

OK, bitte siehe hier.

Das obige ist der detaillierte Inhalt vonCSS Scrollbar mit Fortschrittsmesser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!