Créer une barre de progression de défilement avec HTML, CSS et JavaScript

Introduction

Dans ce laboratoire (lab), nous allons explorer comment créer une barre de progression de défilement (scroll progress bar) en utilisant HTML, CSS et JavaScript. La barre de progression de défilement est un excellent moyen d'indiquer à l'utilisateur sa position actuelle sur la page et combien de contenu reste à voir. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la mise en œuvre de cette fonctionnalité sur votre site web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 84%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Barre de progression de défilement (Scroll Progress Bar)

index.html et style.css ont déjà été fournis dans la machine virtuelle (VM).

Pour créer une barre de progression qui affiche le pourcentage de défilement d'une page web, suivez ces étapes :

Ajoutez un élément div avec l'id "scroll-progress" au code HTML.
Dans le code CSS, définissez la propriété position de l'élément sur fixed, la propriété top sur 0, la propriété width sur 0%, la propriété height sur 4px et la couleur de fond (background) sur #7983ff.
Définissez la valeur de z-index sur un grand nombre pour vous assurer que la barre de progression est placée en haut de la page et au-dessus de tout contenu.
Dans le code JavaScript, sélectionnez l'élément scroll-progress en utilisant la méthode document.getElementById().
Calculez la hauteur de la page web en utilisant la formule document.documentElement.scrollHeight - document.documentElement.clientHeight.
Ajoutez un écouteur d'événement à l'objet window qui écoute l'événement scroll.
Dans la fonction de l'écouteur d'événement, calculez le pourcentage de défilement du document en utilisant la formule (scrollTop / height) * 100.
Définissez la largeur (width) de l'élément scroll-progress sur le pourcentage de défilement en utilisant la propriété style.

Voici le 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}%`;
});

Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations! Vous avez terminé le laboratoire (lab) sur la barre de progression de défilement (Scroll Progress Bar). Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.