IntersectionObserver.rootMargin

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.

Expérimental: 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é rootMargin est une propriété en lecture seule de l'interface IntersectionObserver. C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS margin. Chaque côté de la zone rectangulaire représentée par rootMargin est ajouté au côté correspondant de la boîte englobante de la racine de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle de la boîte englobante de l'élément racine.

Voir la section sur l'élément racine et sa marge externe pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.

Syntaxe

js
marginString = IntersectionObserver.rootMargin;

Valeur

Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS margin, contenant les décalages pour un ou plusieurs côtés de la boîte englobante de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes de la boîte englobante de l'élément racine avant le calcul de l'intersection entre la zone rectangulaire résultante et celle couverte par l'élément cible.

La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'IntersectionObserver. Le navigateur a la possibilité de modifier la valeur.

Si rootMargin n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra "0px 0px 0px 0px", signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. La section sur l'élément racine et sa marge externe décrit avec plus de détails comment rootMargin est utilisée.

Spécifications

Specification
Intersection Observer
# dom-intersectionobserver-rootmargin

Compatibilité des navigateurs

BCD tables only load in the browser