Savoir quand un élément est visible

Ça peut être utile pour démarrer et arrêter une animation selon qu'elle est affichée ou pas, et préserver les performances d'affichage ainsi que la batterie de l'utilisateur. Ou pour toutes sortes de choses.

Exemple

Ouvrir cet exemple dans une autre fenêtre avec la console ancrée à droite pour constater :

Quand je charge la page, j'ai 3 entrées en paramètre de la callback : toutes avec isIntersecting: false
Quand je fais défiler la page doucement pour faire apparaître un titre bidule, j'ai une entrée, avec isIntersecting: true
Quand je fais défiler avec les touches page haut/bas pour en faire apparaître deux d'un coup, j'ai deux appels de la callback avec 1 entrée chacun, et non un seul appel avec 2 entrées comme je m'y attendais. En fait, il faut garder à l'esprit que le navigateur fait toujours défiler pixel par pixel.
Quand j'applique le style display: none à la classe bidule pour faire disparaître les 2 bidules affichés, là j'ai 1 appel de la callback avec 2 entrées

C'est un exemple simplifié pour le cas où je veux juste savoir si l'objet observé est affiché en entier, sans chercher à savoir s'il est affiché en partie et dans quelle proportion (pour ça il faut utiliser les seuils et éventuellement les marges, cf MDN)

Ce n'est pas géré par IE11 donc il faut juste vérifier que l'objet IntersectionObserver existe dans l'objet window. Il va quand même afficher dans la console "Your browser doesn't support NodeList.forEach()" parce qu'il ne supporte que Array.forEach() mais ça ne plante pas le script.

Autre exemple

Pour démarrer ou arrêter une animation en fonction de la visibilité :

if ("IntersectionObserver" in window) {
  var observateur = new IntersectionObserver(function(entrées) {
    entrées.forEach(function(entrée) {
      entrée.target.style.animationPlayState = entrée.isIntersecting ? 'running' : 'paused';
    });
  });

  var observés = document.querySelectorAll('.bidule');
  observés.forEach(function(item) {
    observateur.observe(item);
  });
}