Comment faire défilement infini dans le bon sens | par Jose Granja | Meilleure programmation | Janv.2021

Online Coding Courses for Kids

Si vous effectuez une recherche sur le Web, vous verrez que l’approche la plus courante consiste à se fier à l’événement de défilement du navigateur. Vous pouvez définir une poignée pour vérifier la position du défilement et voir si celui-ci atterrit avant ou après votre dernier élément. Avec ces informations, vous pouvez décider de déclencher ou non le rappel de défilement infini.

Ce que nous faisons est de définir un élément à la fin de la liste et de vérifier si l’utilisateur a fait défiler jusqu’à ce dernier élément pour déclencher le chargement de nouveaux éléments.

Voici un exemple de la façon dont cette liste serait rendue:

Commençons par définir notre hasReachedBottom fonction:

Comme vous pouvez le voir, cette implémentation particulière repose sur le fait que l’élément est le dernier élément de la page. Ce n’est pas très pertinent et il existe d’autres moyens de faire ce calcul pour votre scénario spécifique.

Mettons maintenant cette fonction au travail:

  1. Vérifiez qu’aucune demande n’est en attente.
  2. Vérifiez si l’élément a atteint le fond.
  3. Exécutez la requête réseau.

Noter la offset variable. Nous utilisons un décalage juste pour anticiper quand le dernier élément deviendra visible. C’est pratique si vous souhaitez charger le contenu avant que l’utilisateur n’atteigne le dernier élément. Si le contenu se charge rapidement, ce sera une expérience sans faille.

Une autre remarque importante est de toujours nettoyer après vous-même. Lors de l’utilisation useEffect, vous pouvez renvoyer une fonction chargée du nettoyage. Dans ce cas, nous devons nettoyer le gestionnaire d’événements de défilement. Sinon, nous allons rencontrer des fuites de mémoire.

Bien que cette approche soit assez simple, ce n’est pas la plus efficace. Sur chaque événement de défilement utilisateur, nous vérifions manuellement s’ils ont atteint le bas de la liste. Nous pouvons être beaucoup plus efficaces que cela.

Si vous consultez la page des développeurs de Mozilla, vous verrez cet avertissement:

“Depuis scroll les événements peuvent se déclencher à une vitesse élevée, le gestionnaire d’événements ne doit pas exécuter d’opérations coûteuses en calcul telles que les modifications DOM. Au lieu de cela, il est recommandé de limiter l’événement à l’aide de requestAnimationFrame(), setTimeout(), ou un CustomEvent, comme suit.” – Documents Web MDN

Close Menu