IntersectionObserverEntry.target

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.

La propriété en lecture seule target de l'interface IntersectionObserverEntry indique quel Element ciblé a changé sa proportion d'intersection avec l'élément racine.

Syntaxe

var target = IntersectionObserverEntry.target;

Valeur

La propriété target de l'IntersectionObserverEntry spécifie quel Element précédemment ciblé par l'appel à IntersectionObserver.observe() dont l'intersection avec la racine a changé.

Exemple

Dans cet exemple, la valeur de la propriété CSS opacity de chaque élément cible vaut son intersectionRatio.

function intersectionCallback(entries) {
  entries.forEach(function(entry) {
    entry.target.opacity = entry.intersectionRatio;
  });
}

Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.

Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'Handling intersection changes in Timing element visibility with the Intersection Observer API.

Spécifications

Spécification Statut Commentaire
Intersection Observer
La définition de 'IntersectionObserverEntry.target' 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 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

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,