IntersectionObserver

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.

* Some parts of this feature may have varying levels of support.

L'interface IntersectionObserver de l'API Intersection Observer fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document (viewport). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.

Lorsqu'un objet implémentant IntersectionObserver est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'IntersectionObserver. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.

Constructeur

IntersectionObserver.IntersectionObserver() Expérimental

Crée un nouvel objet IntersectionObserver qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.

Propriétés

IntersectionObserver.root Lecture seule Expérimental

L'élément ou le document dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est null, c'est la zone d'affichage (viewport) de plus haut niveau qui est utilisée.

IntersectionObserver.rootMargin Lecture seule Expérimental

Un rectangle de décalage appliqué à la boîte englobante de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes. Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%). La valeur par défaut est "0px 0px 0px 0px".

IntersectionObserver.thresholds Lecture seule Expérimental

Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est utilisé comme seuil par défaut.

Méthodes

IntersectionObserver.disconnect() Expérimental

Indique à l'objet IntersectionObserver de ne plus observer aucune cible.

IntersectionObserver.observe() Expérimental

Indique à l'objet IntersectionObserver un nouvel élément à observer.

IntersectionObserver.takeRecords() Expérimental

Retourne un tableau d'objets IntersectionObserverEntry pour toutes les cibles observées et cesse de surveiller chacune d'elles.

IntersectionObserver.unobserve() Expérimental

Indique à l'objet IntersectionObserver de cesser d'observer un élément cible particuler.

Exemple

js
var intersectionObserver = new IntersectionObserver(function (entries) {
  // Si intersectionRatio vaut 0 ou moins, la cible
  // est hors de vue et rien n'est alors fait
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Nouveaux éléments chargés");
});
// début de l'observation
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

Spécifications

Specification
Intersection Observer
# intersection-observer-interface

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
IntersectionObserver
IntersectionObserver() constructor
options.root parameter can be a Document
delay
Experimental
disconnect
observe
root
rootMargin
scrollMargin
Experimental
takeRecords
thresholds
trackVisibility
Experimental
unobserve

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Voir aussi