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:

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 ⏬.