Comment travailler avec le défilement sur les pages Web

Faire défiler une page pour voir le contenu sous le pli est probablement l'événement le plus courant sur une page, plus que les clics ou les événements de clavier.

Vous pouvez écouter lescrollévénement sur lewindowobjet pour obtenir des informations à chaque fois que l'utilisateur fait défiler la page:

window.addEventListener('scroll', event => {
  // scroll event detected
})

Dans le gestionnaire d'événements, vous pouvez vérifier la position de défilement vertical actuelle en cochant la casewindowbienswindow.scrollY, et le scolling horizontal utilisantwindow.scrollX.

window.addEventListener('scroll', event => {
  console.log(window.scrollY)
  console.log(window.scrollX)
})

Garde en tête quescrolll'événement n'est pas une chose ponctuelle.

Il se déclenche souvent pendant le défilement, pas seulement à la fin ou au début du défilement, il y a donc un problème si vous devez effectuer n'importe quel type d'opération.

Vous ne devriez pas faire de calcul ou de manipulation directement dans le gestionnaire d'événements du gestionnaire, mais nous devrions utiliserétranglementau lieu.

Étranglement

LescrollL'événement n'est pas déclenché une fois par événement, mais ils appellent en permanence leur fonction de gestionnaire d'événements pendant toute la durée de l'action.

C'est parce qu'il fournit des coordonnées afin que vous puissiez suivre ce qui se passe.

Si vous effectuez une opération complexe dans le gestionnaire d'événements, vous affecterez les performances et causerez une expérience lente aux utilisateurs de votre site.

Bibliothèques qui fournissent une limitation commeLodashimplémentez-le dans plus de 100 lignes de code, pour gérer tous les cas d'utilisation possibles. Une implémentation simple et facile à comprendre est celle-ci, qui utilisesetTimeoutpour mettre en cache l'événement de défilement toutes les 100 ms:

let cached = null
window.addEventListener('scroll', event => {
  if (!cached) {
    setTimeout(() => {
      //you can access the original event at `cached`
      cached = null
    }, 100)
  }
  cached = event
})

La limitation s'applique également à lamousemoveévénement que nous avons vu dans la leçon sur les événements de souris. Même chose - cet événement est déclenché plusieurs fois lorsque vous déplacez la souris.

Voici un exemple sur Codepen:

Voir le styloÉvénements de défilementpar Flavio Copes (@flaviocopes) surCodePen.