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.
Lorsqu'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 vautnull
, la fenêtre du document racine est utilisée. IntersectionObserver.rootMargin
Lecture seule-
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
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.