Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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 racine est alors appelé racine.

Lorsuqu'un 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é après initialisation de l'IntersectionObserver, ainsi un certain objet d'observation n'est utile que pour surveiller des changements spécifiques en mesure de visibilité ; toutefois, l'on peut observer de multiples éléments avec un unique observateur.

Constructeur

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

Propriétés

IntersectionObserver.root Lecture seule
Un ancêtre spécifique de la cible element étant observé. Si aucune valeur n'a été donnée au constructeur ou qu'il vaut null, la fenêtre du document racine est utilisée.
IntersectionObserver.rootMargin Lecture seule
Un rectangle de décalage appliqué au bounding box de la racine lors du calcul des intersections, réduisant ou développant la racine à des fins de calcul. 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
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 définie par défaut.

Méthodes

IntersectionObserver.disconnect()
Indique à l'objet IntersectionObserver de ne plus observer aucune cible.
IntersectionObserver.observe()
Indique à l'IntersectionObserver un nouvel élément à observer.
IntersectionObserver.takeRecords()
Retourne un tableau d'objets IntersectionObserverEntry pour toutes les cibles observées et cesse de surveiller chacune d'elles.
IntersectionObserver.unobserve()
Indique à l'IntersectionObserver de cesser d'observer un élément cible particuler.

Exemples

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

  chargerÉléments(10);
  console.log("Nouveaux éléments chargés");
});
// commencement de l'observation
intersectionObserver.observe(document.querySelector("sélecteur CSS"));

Spécifications

Specification Status Comment
Intersection Observer Version de travail  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 51Edge Support complet 15Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
IntersectionObserver() constructor
Expérimentale
Chrome Support complet 51Edge Support complet 15Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
root
Expérimentale
Chrome Support complet 51Edge Support complet 15Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
rootMargin
Expérimentale
Chrome Support complet 51Edge Support complet 15Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
thresholds
Expérimentale
Chrome Support complet 51Edge Support complet 15Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
disconnect
Expérimentale
Chrome Support complet 51Edge Support complet 15
Notes
Support complet 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
observe
Expérimentale
Chrome Support complet 51Edge Support complet 15Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
takeRecords
Expérimentale
Chrome Support complet 51Edge Support complet 15
Notes
Support complet 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
unobserve
Expérimentale
Chrome Support complet 51Edge Support complet 15
Notes
Support complet 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Support complet 55
Support complet 55
Aucun support 53 — 55
Désactivée
Désactivée From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : lotfire24, JNa0
Dernière mise à jour par : lotfire24,