Dans ce nouveau chapitre je vous propose de découvrir L'IntersectionObserver. Comme son nom l'indique, cet objet permet de détecter lorsqu'un élément entre en collision avec un élément parent. Il pourra servir notamment pour observer lorsqu'un élément entre ou sort de la vue et offre de meilleur performances qu'une écoute sur le scroll et le resize.
Comment ça marche ?
Pour commencer à utiliser cet objet il faut commencer par créer un nouvel observer qui recevra en paramètre un callback qui sera appellé lorsqu'un élément entre en intersection avec l'élément définit dans l'option root ou avec le viewport.
const observer = new IntersectionObserver(function (entries) {
// entries est un tableau contenant des IntersectionObserverEntry
}, {
threshold: 0.5 // permet d'indiquer la zone à partir de laquelle l'élément devient 'visible'
});Une fois cet objet créé il est possible de l'utiliser pour observer un élément.
// Pour observer un élément
observer.observe(document.querySelector('.mon-element'))
// Mais on peut regarder plusieurs éléments
const items = document.querySelectorAll('.text, .image')
for (const item of items) {
observer.observe(item)
}De la même manière il est possible d'arrêter l'observation gràce à la méthode unobserve(). On pourra aussi utiliser disconnect() pour vider complètement la liste des éléments observés
