API `IntersectionObserver` et seuils

IntersectionObserver déclenche des fonctions de rappel lorsqu’un élément entre dans la fenêtre d’affichage ou en sort (ou lorsqu’il entre dans un autre conteneur de défilement ou en sort). C’est l’alternative moderne et performante aux écouteurs de défilement : le navigateur effectue les calculs et votre code ne s’exécute que lors de véritables changements de visibilité.

new IntersectionObserver(callback, options) crée un observateur. La fonction de rappel reçoit un tableau d’entrées lorsque les intersections changent ; les options déterminent le conteneur observé et les seuils à prendre en compte.

Chaque entrée possède target (l’élément observé), isIntersecting (un booléen), intersectionRatio (de 0 à 1), boundingClientRect, intersectionRect et time. Utilisez isIntersecting pour les vérifications de visibilité binaire et intersectionRatio pour la logique fondée sur le pourcentage visible.

{ threshold: 0.5 } déclenche la fonction de rappel chaque fois que le taux d’intersection franchit 50 %. Utilisez un tableau [0, 0.25, 0.5, 0.75, 1] pour déclencher la fonction à chaque quart ; c’est utile pour créer des indicateurs de progression ou des outils d’analyse indiquant le « pourcentage visible ».

Par défaut, l’observateur mesure l’intersection avec la fenêtre d’affichage. Définissez root: someScrollableDiv pour mesurer l’intersection par rapport à un conteneur de défilement interne, par exemple une liste virtualisée dans un div à hauteur fixe.

rootMargin: "200px" agrandit la zone d’observation de 200 pixels de chaque côté. Utilisez-la pour déclencher l’action plus tôt (commencer à charger les images 200 pixels avant leur entrée dans la fenêtre d’affichage) ou plus tard (attendre qu’elles soient complètement sorties de la fenêtre).

observer.observe(element) commence à surveiller un élément ; observer.unobserve(element) arrête de le surveiller. Appelez toujours unobserve lorsque vous n’avez plus besoin de la fonction de rappel (par exemple, après un seul déclenchement du chargement différé), afin de libérer la mémoire.

observer.disconnect() arrête la surveillance de tous les éléments observés. Appelez cette méthode lorsque le composant est démonté ou que l’observateur n’est plus nécessaire ; cela évite les fuites causées par des observateurs qui survivent à leur cas d’utilisation.

Les fonctions de rappel sont appelées de manière asynchrone et regroupées : de nombreux changements d’intersection pendant un défilement rapide déclenchent une seule fonction de rappel contenant toutes les entrées, et non une fonction par élément. C’est un gain de performance majeur par rapport aux écouteurs de défilement, appelés à chaque événement de défilement.

Lorsque vous observez un nouvel élément, la fonction de rappel est appelée une fois, presque immédiatement, avec l’état actuel. Cela permet de gérer les éléments déjà visibles au début de l’observation, sans chemin d’initialisation particulier.

Chargement différé des images, déclenchement d’animations lors de l’entrée dans la fenêtre d’affichage, défilement infini (observation d’un sentinel près de la fin de la liste), suivi des articles réellement lus par l’utilisateur, activation ou désactivation d’un en-tête fixe selon la visibilité de la section principale.

Quelle est la différence entre un seuil de 0 et un seuil de 1 dans un IntersectionObserver ?

IntersectionObserver déclenche des fonctions de rappel lors des changements de visibilité d’un élément, avec regroupement et bonnes performances intégrés : utilisez-le à la place des écouteurs de défilement pour la logique de visibilité. Configurez-le avec un seuil (de 0 à 1 ou sous forme de tableau), une racine (un conteneur de défilement personnalisé) et rootMargin (pour agrandir ou réduire la zone observée). Utilisez observe et unobserve pour les éléments concernés ; la déconnexion nettoie tout.