Réponse pour 2018 :
La meilleure façon de faire des choses comme ça est d'utiliser l' API Intersection Observer .
L'API Intersection Observer fournit un moyen d'observer de manière asynchrone les modifications à l'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre d'affichage d'un document de niveau supérieur.
Historiquement, la détection de la visibilité d'un élément, ou de la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tâche difficile pour laquelle les solutions ont été peu fiables et sujettes à ralentir le navigateur et les sites auxquels l'utilisateur accède. Malheureusement, à mesure que le Web a mûri, le besoin de ce type d'informations s'est accru. Les informations d'intersection sont nécessaires pour de nombreuses raisons, telles que:
- Le chargement paresseux d'images ou d'autres contenus pendant qu'une page défile.
- Implémentation de sites Web à «défilement infini», où de plus en plus de contenu est chargé et rendu au fur et à mesure que vous faites défiler, afin que l'utilisateur n'ait pas à parcourir les pages.
- Reporting de visibilité des publicités afin de calculer les revenus publicitaires.
- Décider d'exécuter ou non des tâches ou des processus d'animation selon que l'utilisateur verra ou non le résultat.
L'implémentation de la détection d'intersection dans le passé impliquait des gestionnaires d'événements et des boucles appelant des méthodes telles que Element.getBoundingClientRect () pour générer les informations nécessaires pour chaque élément affecté. Étant donné que tout ce code s'exécute sur le thread principal, même l'un d'entre eux peut entraîner des problèmes de performances. Lorsqu'un site est chargé avec ces tests, les choses peuvent devenir carrément laides.
Consultez l'exemple de code suivant:
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#listItem');
observer.observe(target);
La plupart des navigateurs modernes prennent en charge IntersectionObserver , mais vous devez utiliser le polyfill pour la compatibilité descendante.
element
etdocument.body
n'étaient que des exemples). Voir howtocreate.co.uk/tutorials/javascript/browserwindow pour plus de détails.