Ausführliche Erläuterung verschiedener Techniken zur Verwendung von reinem CSS, um den Scroll-Fortschrittsbalkeneffekt zu erzielen

In diesem Artikel werden Ihnen einige unglaubliche reine CSS-Scrolling-Fortschrittsbalkeneffekte vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Erste Frage: Wie kann man mit CSS den folgenden Bildlaufleisteneffekt erzielen?

ist der gelbe Scroll-Fortschrittsbalken oben, dessen Länge sich beim Scrollen der Seite ändert.

Sie können sich einen Moment Zeit nehmen, bevor Sie unten weiterlesen. Denken Sie über die oben genannten Effekte nach oder probieren Sie es selbst aus, um herauszufinden, ob Sie die oben genannten Effekte ohne die Verwendung von JS geschickt erzielen können.

OK, weiter. Dieser Effekt ist ein ähnliches kleines Problem, auf das ich im Prozess der Geschäftsentwicklung gestoßen bin. Selbst wenn ich Javascript verwende, ist meine erste Reaktion, dass es sich sehr problematisch anfühlt. Ich habe mich also gefragt, ob es möglich ist, diesen Effekt nur mit CSS zu erzielen.

Anforderungen analysieren

Als ich diesen Effekt zum ersten Mal sah, hatte ich das Gefühl, dass die folgende Scroll-Animation mit CSS allein nicht fertigzustellen war, da sie die Berechnung der Seiten-Scroll-Distanz beinhaltet.

Wenn Sie es nur mit CSS implementieren möchten, können Sie nur einen anderen Weg finden und einige clevere Methoden verwenden.

Okay, lass uns ein paar Tricks anwenden, um diesen Effekt Schritt für Schritt mithilfe von CSS zu erzielen. Analysieren Sie die Schwierigkeit:

• Wie kann ich die Distanz ermitteln, über die der Benutzer aktuell auf der Seite scrollt, und den oberen Fortschrittsbalken benachrichtigen?

Eine normale Analyse sollte so aussehen, aber das fällt in die traditionelle Denkweise. Der Fortschrittsbalken ist nur ein Fortschrittsbalken, der die Scroll-Distanz der Seite empfängt und die Breite ändert. Was ist, wenn das Scrollen der Seite und der Fortschrittsbalken ein Ganzes sind?

Umsetzung der Anforderungen

Es ist keine Selbstverständlichkeit mehr. Lassen Sie uns Linear Gradient verwenden, um diese Funktion zu realisieren.

Angenommen, unsere Seite ist in eingeschlossen und der gesamte Text kann durch einen solchen linearen Farbverlauf von der unteren linken zur oberen rechten Ecke gescrollt werden: 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

那么，我们可以得到一个这样的效果：

Wow，黄色块的颜色变化其实已经很能表达整体的进度了。其实到这里，聪明的同学应该已经知道下面该怎么做了。

我们运用一个伪元素，把多出来的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

为了方便演示，我把上面白色底改成了黑色透明底，：

实际效果达成了这样：

眼尖的同学可能会发现，这样之后，滑到底的时候，进度条并没有到底：

究其原因，是因为 body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

这里使用了 calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度，这样渐变刚好在滑动到底部的时候与右上角贴合。

而 + 5px 则是滚动进度条的高度，预留出 5pxrrreee

Dann Wir können einen Effekt wie diesen erzielen:

Wow, der Farbwechsel des gelben Blocks kann tatsächlich den Gesamtfortschritt ausdrücken. Tatsächlich sollten kluge Schüler bereits jetzt wissen, was als nächstes zu tun ist.

Wir verwenden ein Pseudoelement, um den zusätzlichen Teil abzudecken: rrreeeZur Vereinfachung der Demonstration habe ich den weißen Hintergrund oben in einen schwarzen transparenten Hintergrund geändert:

Der tatsächliche Effekt ist so:

Schüler mit scharfen Augen bemerken möglicherweise: Danach erreicht der Fortschrittsbalken beim Schieben nach unten nicht den unteren Rand: 🎜🎜🎜🎜🎜🎜Der Grund dafür ist, dass die lineare Gradientenhöhe von body die Größe des gesamten Körpers festlegt Farbverlauf: 🎜rrreee 🎜Hier haben wir calc verwendet, um die Berechnung durchzuführen und 100vh subtrahiert, was bedeutet, dass die Höhe des Bildschirms subtrahiert wird, sodass der Farbverlauf genau beim bleibt obere rechte Ecke beim Schieben nach unten. 🎜🎜Und + 5px ist die Höhe des Scroll-Fortschrittsbalkens, so dass eine Höhe von 5px verbleibt. Schauen wir uns den Effekt noch einmal an, er ist perfekt: 🎜🎜🎜🎜🎜🎜🎜 An diesem Punkt ist diese Anforderung perfekt umgesetzt, was ein guter kleiner Trick ist: 🎜🎜🎜CodePen-Demo – Verwenden Sie einen linearen Farbverlauf, um das Scrollen zu implementieren Fortschrittsbalken🎜🎜 🎜🎜🎜🎜🎜🎜Ich schreibe normalerweise keine Dinge, die andere geschrieben haben. Ich habe diese Technik vor langer Zeit zufällig in meinem Unternehmen verwendet und diesen Artikel geschrieben, ohne zu recherchieren Wer hat diesen Trick zuerst erfunden? Ich weiß nicht, ob es einen ähnlichen Artikel gab, daher können Sie sich auch den folgenden Artikel ansehen: 🎜🎜🎜 W3C – Reine CSS-Implementierung von Scroll Indicator🎜🎜

Endlich

Eigentlich ist das nur ein sehr toller Farbverlaufganz kleiner Trick. Weitere interessante CSS-Elemente, an die Sie noch nie gedacht haben, finden Sie hier:

CSS-Inspiration – CSS-Inspiration

Okay, dieser Artikel endet hier, ich hoffe, er ist hilfreich für Sie :)

Ursprüngliche Adresse: https://segmentfault.com/a/1190000017830427

Autor: chokcoco

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung verschiedener Techniken zur Verwendung von reinem CSS, um den Scroll-Fortschrittsbalkeneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!