Comment vérifier si un élément est visible dans le viewport?

24 aout 2017 / Marouen Mhiri / Javascript

Une des fonctions les plus connues quand il s'agit d'activer/désactiver des effets sur des éléments qui ne sont pas encore visible (par exemple seulement aprés un scroll). Javascript nous offre une API que je trouve personnellement trés simple et confortable.
Il s'agit de l'API IntersectionObserver.

Vous voudrez peut-être le faire pour que vous puissiez basculer les images à la minute ou parce que vous devez savoir si l'utilisateur regarde réellement une certaine bannière publicitaire. Vous pouvez le faire en branchant l'événement de défilement ou en utilisant une minuterie périodique et en appelant getBoundingClientRect() sur cet élément. Cette approche, cependant, est douloureusement lente car chaque appel à getBoundingClientRect() oblige le navigateur à redistribuer la page entière et introduira un jank considérable sur votre site. Les choses sont presque impossibles lorsque vous savez que votre site est chargé dans un iframe et que vous souhaitez savoir quand l'utilisateur peut voir un élément. Le modèle d'origine unique et le navigateur ne vous permettront pas d'accéder aux données de la page Web contenant l'iframe. C'est un problème courant pour les annonces, par exemple, qui sont fréquemment utilisées à l'aide d'iframes.

Faire en sorte que ce test de visibilité soit plus efficace, l'API IntersectionObserver a été conçue , et elle a débarqué dans Chrome 51 (mais tjs en version bêta ).

IntersectionObserver vous permet de savoir quand un élément observé entre ou sort de la fenêtre du navigateur.

Comment créer un IntersectionObserver?

Voyons ce code:

					
var io = new IntersectionObserver(
    entries => {
        console.log(entries);
    },
    {
        /* Using default options. Details below */
    }
);
// Commencer à observer un élément
io.observe(element);

// Arrêter d'observer un élément
// io.unobserve(element);

// désactiver l'IntersectionObserver
// io.disconnect();
					
				

En utilisant les options par défaut pour IntersectionObserver , la fonction callback sera appelée à la fois lorsque l'élément apparaîtra partiellement et quand il quittera complètement la fenêtre.

Si vous voulez observer plusieurs éléments, il est conseillé d'observer plusieurs éléments en utilisant la même instance IntersectionObserver en appelant observe() plusieurs fois.

Un paramètre d'entries est transmis à votre callback. C'e est un tableau d'objets IntersectionObserverEntry . Chaque objet contient des données d'intersection mises à jour pour l'un de vos éléments observés.

Pour plus d'informations consultez cette page

Maintenant on va essayer d'écrire un petit exemple: on veut essayer de voir quand est-ce que la box numéro 10 serait visible et afficher les portions visibles à droite en haut de la page.

See the Pen Visibilty check by Marouen Mhiri (@Marouen) on CodePen.

Je trouve cette API vraiment effective à voir le tant de fois où j'ai essayé de simuler cette feature en écrivant des dizaines de lignes Javascript et ça n'a vraiment pas fonctionné comme il faut.

Cette API fonctionne en FF, chrome et Edge à partir de certaines versions. Mais la bonne nouvelle est qu'il existe un polyfill (voir cette page).

Tags :

javascript