IntersectionObserver.IntersectionObserver()

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.

Le constructeur IntersectionObserver() crée et retourne un nouvel objet IntersectionObserver. Le rootMargin (marges de la racine), si spécifié, est vérifié pour s'assurer qu'il est syntaxiquement correct, les seuils d'intersection aussi pour vérifier qu'ils sont tous sur l'intervalle entre 0.0 et 1.0 inclus, et en fin que la liste des seuils d'intersection est triée par ordre croissant. Si la liste des seuils est vide, sa valeur par défaut est [0.0].

Syntaxe

let observer = new IntersectionObserver(fonctionRappel[, options]);

Paramètres

fonctionRappel
Une fonction appelée lorsque la proportion de l'élément visible franchit un seuil. La fonciton de rappel reçoit en entrée deux paramètres:
entrées
une liste d'objets IntersectionObserverEntry, chacun représentant un seuil qui a été franchi, que ce soit en passant au-dessus ou en-dessous du pourcentage spécifié par le seuil.
observateur
L'IntersectionObserver pour lequel la fonction de rappel est invoquée.
options Facultatif
un objet optionnel qui paramètre l'observateur. Si options n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans marge, et un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Vous pouvez fournir dans l'objet options les propriétés suivantes :
root
Un objet Element qui est racine de la cible désignée, dont le rectangle attaché sera considéré comme la fenêtre. Toute portion de l'élément cible non visible dans la zone couverte par le root n'est pas considérée visible.
rootMargin
Une chaîne de caractères spécifiant un ensemble de décalages à ajouter au bounding_box de la racine au moment de calculer les intersections, en réduisant ou grossissant la racine à des fins de calcul. La syntaxe est approximativement la même que celle pour la propriété CSS margin ; voir L'élément racine et sa marge externe in Intersection Observer API pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est "0px 0px 0px 0px".
threshold
Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils  définis comme ratios de la hauteur visible d'un élément cible observé par rapport à sa hauteur totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir Thresholds in Intersection Observer API pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.

Valeur de retour

Un nouvel IntersectionObserver pouvant être utilisé pour observer la visibilité d'un élément cible au sein de l'élément root spécifié franchissant un des seuils de visibilité spécifiés. Appeler sa méthode observe() pour commencer à observer les changements de visibilité d'un élément cible.

Erreurs

SyntaxError
Le rootMargin spécifié est invalide.
RangeError
Une ou plusieurs des valeurs du threshold est en dehors de l'intervalle allant de 0.0 à 1.0.

Spécifications

Spécification Statut Commentaire
Intersection Observer
La définition de 'IntersectionObserver constructor' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur 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

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.
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 : JNa0
Dernière mise à jour par : JNa0,