Événement de défilement

2

Il est possible d'écouter l'événement déclenché par le défilement d'un élément ou de la page grâce à addEventListener.

window.addEventListener('scroll', function() {...});

Cet événement permet ensuite de déclencher d'autres événements au moment opportun.

Par exemple:

- Afficher/masquer un menu en fonction de la direction du scroll.
- Une barre de progrès indiquant le pourcentage d'avancement d'un article.
- Un personnage animé uniquement lorsque la page défile.
- L'apparition d'un "popup" vers la fin d'un article.
- Etc.

Défilement

Il est possible d'obtenir le nombre de pixels ayant étés défilés sur un axe (X ou Y) d'un élément grâce aux propriétés scrollX et scrollY.

Par exemple, afin obtenir le nombre de pixels ayant étés défilés verticalement sur la page, il est possible d'utiliser:

window.scrollY

Progression

Il faut préalablement obtenir le nombre de pixels ayant étés défilés

Il faut ensuite comparer cette valeur à une référence. Par exemple, la largeur ou la hauteur du document.

document.body.clientWidth
// ou
document.body.clientHeight

Diviser la première valeur (px défilés) par la deuxième (référence) retournera une fraction entre 0 et 1 correspondant au pourcentage de défilement effectué.

Direction

Afin déterminer la direction du défilement, il faut préalablement obtenir le nombre de pixel actuellement défilés.

Il faut ensuite comparer cette valeur à une précédente version.

Par exemple, dans le cas d'un défilement vertical, si la valeur actuelle est:

  • Plus petite, le défilement ce fait vers le haut ⏫.
  • Plus grande, le défilement ce fait vers le bas ⏬.
Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme