AddEventListener() scroll
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 ou masquer un menu en fonction de la direction du scroll.
Animer 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" d'offre spécial 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
d'un élément.
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 de départ.
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 un ratio 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 à la valeur précédente.
Par exemple, dans le cas d'un défilement vertical, si la valeur actuelle est:
Plus petite que la valeur précédente, le défilement se fait vers le haut ⏫.
Plus grande que la valeur précédente, le défilement se fait vers le bas ⏬.