Erstellen Sie eine Scrollfortschrittsleiste mit HTML, CSS und JavaScript

Einführung

In diesem Lab werden wir untersuchen, wie man mit HTML, CSS und JavaScript eine Scrollfortschrittsleiste erstellt. Die Scrollfortschrittsleiste ist eine hervorragende Möglichkeit, um dem Benutzer seine aktuelle Position auf der Seite anzuzeigen und zu zeigen, wie viel Inhalt noch übrig ist. Am Ende dieses Labs werden Sie besser verstehen, wie Sie dieses Feature auf Ihrer Website implementieren können.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 84% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Scrollfortschrittsleiste

index.html und style.css wurden bereits in der virtuellen Maschine (VM) bereitgestellt.

Um eine Fortschrittsleiste zu erstellen, die den Scrollprozentsatz einer Webseite anzeigt, befolgen Sie diese Schritte:

Fügen Sie ein div-Element mit der id "scroll-progress" in den HTML-Code ein.
Im CSS-Code setzen Sie die position des Elements auf fixed, den top auf 0, die width auf 0%, die height auf 4px und die background-Farbe auf #7983ff.
Setzen Sie den z-index-Wert auf eine große Zahl, um sicherzustellen, dass die Fortschrittsleiste oben auf der Seite und über allen Inhalten platziert wird.
Im JavaScript-Code wählen Sie das scroll-progress-Element mit der Methode document.getElementById() aus.
Berechnen Sie die Höhe der Webseite mit der Formel document.documentElement.scrollHeight - document.documentElement.clientHeight.
Fügen Sie dem window-Objekt einen Ereignis-Listener hinzu, der auf das scroll-Ereignis lauscht.
In der Ereignis-Listener-Funktion berechnen Sie den Scrollprozentsatz des Dokuments mit der Formel (scrollTop / height) * 100.
Setzen Sie die width des scroll-progress-Elements auf den Scrollprozentsatz mit der style-Eigenschaft.

Hier ist der Code:

<div id="scroll-progress"></div>

#scroll-progress {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: #7983ff;
  z-index: 10000;
}

const scrollProgress = document.getElementById("scroll-progress");
const height =
  document.documentElement.scrollHeight - document.documentElement.clientHeight;

window.addEventListener("scroll", () => {
  const scrollTop =
    document.body.scrollTop || document.documentElement.scrollTop;
  scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});

Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Web-Service auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzusehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zur Scrollfortschrittsleiste abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.