IntersectionObserver pour les effets déclenchés par le défilement

L’API IntersectionObserver surveille efficacement si un ou plusieurs éléments entrent dans la zone d’affichage du navigateur ou en sortent (ou entrent dans un élément ancêtre spécifié ou en sortent). Contrairement aux écouteurs de défilement qui se déclenchent à chaque pixel, l’observateur appelle votre fonction de rappel uniquement lorsque l’élément franchit un seuil, ce qui la rend bien plus performante pour les effets liés au défilement.

La fonction de rappel reçoit un tableau d’objets IntersectionObserverEntry, un par élément observé. Chaque entrée possède un booléen isIntersecting (vrai lorsque l’élément est visible) et un nombre intersectionRatio compris entre 0 et 1 (fraction de l’élément actuellement visible). Utilisez ces valeurs pour déterminer l’état de visibilité.

Créez l’observateur dans un useEffect et appelez observer.observe(ref.current) pour commencer à surveiller l’élément. La référence doit être attachée à l’élément du DOM que vous souhaitez suivre. Créez l’observateur après le montage du composant afin que ref.current soit renseignée.

Dans la fonction de nettoyage de useEffect, appelez observer.unobserve(element) pour arrêter de surveiller un élément précis, ou observer.disconnect() pour arrêter toutes les observations. Si vous oubliez le nettoyage, l’observateur persiste après le démontage du composant, ce qui peut provoquer des erreurs ou des fuites de mémoire.

L’option threshold détermine quand la fonction de rappel se déclenche. Une valeur de 0 déclenche la fonction dès qu’un pixel de l’élément est visible. Une valeur de 1 ne la déclenche que lorsque l’élément est entièrement visible. Vous pouvez également transmettre un tableau comme [0, 0.5, 1] pour recevoir des fonctions de rappel à plusieurs niveaux de visibilité.

rootMargin agrandit ou réduit la zone d’intersection effective à l’aide d’une syntaxe de type CSS : '100px 0px' déclenche la fonction 100px avant que l’élément n’entre dans la zone d’affichage. Utilisez '-100px' pour ne déclencher la fonction que lorsque l’élément se trouve à 100px à l’intérieur de la zone d’affichage. Cela est utile pour précharger ou animer un élément avant qu’il ne soit entièrement visible.

Pour charger les images de manière différée, définissez d’abord un attribut data-src au lieu de src. Lorsque l’observateur se déclenche avec isIntersecting: true, copiez data-src dans src pour déclencher la requête réseau. Appelez ensuite observer.unobserve(entry.target), puisque l’image ne doit être chargée qu’une seule fois.

Pour créer des animations d’apparition en fondu, ajoutez une classe CSS lorsque isIntersecting devient vrai : element.classList.add('visible'). Définissez la transition dans CSS : .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } et .card.visible { opacity: 1; transform: none; }. L’observateur déclenche efficacement ce mécanisme.

IntersectionObserver est idéal pour suivre les consultations. Lorsqu’un élément possédant un attribut data-analytics-id devient visible dans la zone d’intersection avec un seuil de 0,5, déclenchez un événement d’analyse. Cette méthode mesure précisément les sections de contenu que les utilisateurs lisent réellement, avec une fiabilité bien supérieure à celle d’un simple pourcentage de profondeur du défilement.

Une seule instance d’IntersectionObserver peut observer plusieurs éléments en appelant observer.observe(element) pour chacun d’eux. Tous les éléments observés partagent la même fonction de rappel et les mêmes options. Utilisez entry.target dans la fonction de rappel pour déterminer quel élément a déclenché la notification.

Un crochet réutilisable useInView renvoie [ref, inView]. Attachez ref à n’importe quel élément et consultez inView pour savoir s’il est actuellement visible. Le crochet accepte un objet options pour le seuil et rootMargin. Cette abstraction rend les effets liés au défilement déclaratifs dans n’importe quel composant.

IntersectionObserver suit efficacement la visibilité des éléments à l’aide de isIntersecting et intersectionRatio. Effectuez toujours le nettoyage avec unobserve ou disconnect. Utilisez threshold pour contrôler le point de déclenchement et rootMargin pour étendre la zone de détection. Appliquez-le au chargement différé, aux animations et au suivi analytique.