Dans ce nouveau tutoriel je vous porpose de découvrir un nouvel objet JavaScript actuellement au stade d'Editor's draft : 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 ou 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.

let observer = new IntersectionObserver(function (observables) {
  // observables 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
let items = document.querySelectorAll('.text, .image')
items.forEach(function (item) {
  observer.observe(item)
})

De la même manière il est possible d'arrêter l'observation gràce à la méthode unobserve.

Un petit exemple

Il est possible d'utiliser cet objet pour mettre en place un effet lors de l'apparition d'élément dans la page :

let observer = new IntersectionObserver(function (observables) {
  observables.forEach(function (observable) {
    // L'élément devient visible
    if (observable.intersectionRatio > 0.5) {
      observable.target.classList.remove('not-visible')
      observer.unobserve(observable.target)
    }
  })
}, {
  threshold: [0.5]
});

// On observe nos éléments
let items = document.querySelectorAll('.image')
items.forEach(function (item) {
  item.classList.add('not-visible')
  observer.observe(item)
})

Qui le supporte ?

Pour le moment cette fonction est plutôt récente et n'est supporté par un nombre limité de navigateur (Chrome: 51+ et Opera: 38+ seulement, cf caniuse) mais il est possible d'utiliser un polyfill pour les navigateurs ne le supportant pas.