From 69d118500cccd88ca649d8bd12cf02019cd33a6d Mon Sep 17 00:00:00 2001 From: tristantheb Date: Sun, 11 Apr 2021 18:40:27 +0200 Subject: FIX: Update all FR content of the IntersectionObserver interface - Issue #409 (#410) * FIX: Update and fix all pages, remove old KS, update id-attr, replace content, translate missing strings * FIX: Fix some old text typo * Review - IntersectionObserver interface - rewordings and minor fixes * Review - IntersectionObserver.IntersectionObserver constructor - rewordings * Review - IntersectionObserver.observe - minor rewordings * Review - IntersectionObserver.root - rewordings * Review - IntersectionObserver.rootMargin - rewordings * Review - IntersectionObserver.thresholds - rewordings * Review - IntersectionObserver.unobserve - minor rewordings Co-authored-by: julieng --- files/fr/web/api/intersectionobserver/index.html | 109 ++++++++++---------- .../intersectionobserver/index.html | 110 +++++++++++---------- .../api/intersectionobserver/observe/index.html | 66 +++++-------- .../web/api/intersectionobserver/root/index.html | 61 +++++++----- .../api/intersectionobserver/rootmargin/index.html | 55 +++++------ .../api/intersectionobserver/thresholds/index.html | 71 ++++++------- .../api/intersectionobserver/unobserve/index.html | 74 +++++++------- 7 files changed, 273 insertions(+), 273 deletions(-) (limited to 'files') diff --git a/files/fr/web/api/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/index.html index fdeb1c2eeb..1842bb7f60 100644 --- a/files/fr/web/api/intersectionobserver/index.html +++ b/files/fr/web/api/intersectionobserver/index.html @@ -3,87 +3,90 @@ title: IntersectionObserver slug: Web/API/IntersectionObserver tags: - API - - Experimental - Interface + - Intersection Observer API - IntersectionObserver - - Observation - - Visibilité + - Reference + - observers translation_of: Web/API/IntersectionObserver --- -
{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}
+
{{APIRef("Intersection Observer API")}}
-

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 {{Glossary('viewport')}}. L'ancêtre ou la fenêtre du document racine est alors appelé racine.

+

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

-

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.

+

Lorsqu'un objet implémentant 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ée après initialisation de l'IntersectionObserver. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.

-

Constructeur

+

Constructeur

-
{{domxref("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.
+
IntersectionObserver.IntersectionObserver() {{Experimental_inline}}
+
Crée un nouvel objet IntersectionObserver qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.
-

Propriétés

+

Propriétés

-
{{domxref("IntersectionObserver.root")}} {{readonlyinline}}
-
Un ancêtre spécifique de la cible {{domxref("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.
-
{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
-
-
-
Un rectangle de décalage appliqué au {{Glossary ('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".
-
-
-
{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
-
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.
+
IntersectionObserver.root {{readonlyinline}} {{Experimental_inline}}
+
L'élément ou le document dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est null, c'est la zone d'affichage (viewport) de plus haut niveau qui est utilisée.
+
IntersectionObserver.rootMargin {{readonlyinline}} {{Experimental_inline}}
+
Un rectangle de décalage appliqué à la boîte englobante de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. 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 {{readonlyinline}} {{Experimental_inline}}
+
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 utilisé comme seuil par défaut.
-

Méthodes

+

Méthodes

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

Exemples

-
+
IntersectionObserver.observe() {{Experimental_inline}}
+
Indique à l'objet IntersectionObserver un nouvel élément à observer.
+
IntersectionObserver.takeRecords() {{Experimental_inline}}
+
Retourne un tableau d'objets IntersectionObserverEntry pour toutes les cibles observées et cesse de surveiller chacune d'elles.
+
IntersectionObserver.unobserve() {{Experimental_inline}}
+
Indique à l'objet IntersectionObserver de cesser d'observer un élément cible particuler.
-
var intersectionObserver = new IntersectionObserver(function (entrées) {
+
Exemple

+
+
var intersectionObserver = new IntersectionObserver(function(entries) {
   // Si intersectionRatio vaut 0 ou moins, la cible
   // est hors de vue et rien n'est alors fait
-  if (entrées[0].intersectionRatio <= 0) return;
+  if (entries[0].intersectionRatio <= 0) return;
 
-  chargerÉléments(10);
-  console.log("Nouveaux éléments chargés");
+  loadItems(10);
+  console.log('Nouveaux éléments chargés');
 });
-// commencement de l'observation
-intersectionObserver.observe(document.querySelector("sélecteur CSS"));

+// début de l'observation
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
-

Spécifications

+

Spécifications

- - - - - - - - - - - - + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}} 
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

{{Compat("api.IntersectionObserver")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html index f9cd0084ab..d22916ffd3 100644 --- a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html +++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html @@ -3,79 +3,87 @@ title: IntersectionObserver.IntersectionObserver() slug: Web/API/IntersectionObserver/IntersectionObserver tags: - API - - Constructeur - Constructor - - Intersection Observer + - Intersection Observer API - IntersectionObserver - - IntersectionObserver API - Reference + - Visibility + - Visible translation_of: Web/API/IntersectionObserver/IntersectionObserver --- -
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+
{{APIRef("Intersection Observer API")}}
-

Le constructeur IntersectionObserver() crée et retourne un nouvel objet {{domxref("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].

+

Le constructeur IntersectionObserver() crée et retourne un nouvel objet IntersectionObserver. Les marges appliquées à la zone racine (indiquée dans l'objet options via la propriété rootMargin, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété thresholds d'options) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est [0.0].

-

Syntaxe

+

Syntaxe

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

Paramètres

+

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 {{domxref("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'{{domxref("IntersectionObserver")}} pour lequel la fonction de rappel est invoquée.
-
-
-
options {{optional_inline}}
-
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 {{domxref("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 {{Glossary('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 {{cssxref("margin")}} ; voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} 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 {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.
-
-
+
callback
+
Une fonction appelée lorsque la proportion de l'élément qui est visible franchit un seuil. La fonction de rappel reçoit en entrée deux paramètres : +
+
entries
+
Une liste d'objets IntersectionObserverEntry, chacun représentant un seuil franchi, que ce soit en passant au-dessus ou en dessous du pourcentage spécifié par le seuil.
+
observateur
+
L'objet IntersectionObserver pour lequel la fonction de rappel est invoquée.
+
+
+
options {{optional_inline}}
+
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 appliquer de marge, et avec un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Les propriétés suivantes peuvent être utilisées pour la configuration : +
+
root
+
Un objet Element ou Document qui est un ancêtre de l'élément observé et dont la boîte englobante sera considérée comme la zone d'affichage (viewport). Toute portion de l'élément cible qui n'est pas visible dans la zone couverte par cette zone englobant n'est pas considérée visible.
+
rootMargin
+
Une chaîne de caractères spécifiant un ensemble de décalages à ajouter à la zone englobante pour le calcul des intersections. La zone effective utilisées pour les calculs peut ainsi être réduite ou étendue. La syntaxe est proche de celle utilisée pour la propriété CSS margin. Voir L'élément racine et sa marge externe 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 part visible d'un élément cible observé par rapport à sa surface 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 cette section sur les seuils pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.
+
+
-

Valeur de retour

+

Valeur de retour

-

Un nouvel {{domxref("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 {{domxref("IntersectionObserver.observe", "observe()")}} pour commencer à observer les changements de visibilité d'un élément cible.

+

Un nouvel objet IntersectionObserver pouvant être utilisé pour observer la visibilité d'un élément cible au sein de la racine indiquée, pour le franchissement des seuils de visibilité spécifiés. Il faudra appeler la méthode observe() de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.

-

Erreurs

+

Exceptions

-
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.
+
SyntaxError
+
La propriété rootMargin de l'argument options est invalide.
+
RangeError
+
Une ou plusieurs des valeurs de threshold (portée par l'argument options) est en dehors de l'intervalle allant de 0.0 à 1.0.
-

Spécifications

+

Exemple

+ +

Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction myObserverCallback chaque fois que la zone visible de l'élément observé change d'au moins 10%.

+ +
let observer = new IntersectionObserver(myObserverCallback, {
+  threshold: 0.1
+});
+ +

Spécifications

- - - - - - - - - - - - + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}{{Spec2('IntersectionObserver')}}Définition initiale.
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}{{Spec2('IntersectionObserver')}}Définition initiale.
-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

{{Compat("api.IntersectionObserver.IntersectionObserver")}}

diff --git a/files/fr/web/api/intersectionobserver/observe/index.html b/files/fr/web/api/intersectionobserver/observe/index.html index a9dd23b18b..1e05c9d038 100644 --- a/files/fr/web/api/intersectionobserver/observe/index.html +++ b/files/fr/web/api/intersectionobserver/observe/index.html @@ -4,72 +4,60 @@ slug: Web/API/IntersectionObserver/observe tags: - API - Intersection Observer + - Intersection Observer API - IntersectionObserver - - IntersectionObserver API - - Méthode + - Method - Reference - observe translation_of: Web/API/IntersectionObserver/observe ---
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
-

La méthode observe() de l'interface {{domxref("IntersectionObserver")}} ajoute un élément à l'ensemble des éléments cibles étant observés par l'IntersectionObserver. Un observateur a un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode {{domxref("IntersectionObserver.unobserve()")}}.

+

La méthode observe() de l'interface IntersectionObserver ajoute un élément à l'ensemble des éléments cibles étant observés par l'IntersectionObserver. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode IntersectionObserver.unobserve().

-

Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans {{domxref("IntersectionObserver.thresholds")}}, la fonction de rappel de l'observateur est executée avec un {{domxref("IntersectionObserverEntry")}} représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets IntersectionObserverEntry.

+

Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans IntersectionObserver.thresholds, la fonction de rappel de l'observateur est executée avec comme argument un objet IntersectionObserverEntry représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets IntersectionObserverEntry.

-

Syntaxe

+

Syntaxe

-
IntersectionObserver.observe(cible);
+
IntersectionObserver.observe(targetElement);
-

Paramètres

+

Paramètres

-
cible
-
Un {{domxref("element")}} dont la visibilité dans la racine est à suivre. Cet élément doit nécessairement être descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).
+
targetElement
+
Un élément dont on souhaite observer les changements de visibilité dans la racine. Cet élément doit nécessairement être un descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).
-

Valeur de retour

+

Valeur de retour

undefined.

- -

Exemples

- -
  // Créer l'observateur
-  let observateur = new IntersectionObserver(fonctionRappel, optionsObservateur);
-
- -

Faire observer un élément par l'observateur :

- -
observateur.observe(cible);
- -

Spécifications

+

Spécifications

- - - - - - - - - - - + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

{{Compat("api.IntersectionObserver.observe")}}

-

Voir aussi

+

Voir aussi

diff --git a/files/fr/web/api/intersectionobserver/root/index.html b/files/fr/web/api/intersectionobserver/root/index.html index 755208e8ae..1f15257960 100644 --- a/files/fr/web/api/intersectionobserver/root/index.html +++ b/files/fr/web/api/intersectionobserver/root/index.html @@ -4,45 +4,58 @@ slug: Web/API/IntersectionObserver/root tags: - API - Intersection Observer + - Intersection Observer API - IntersectionObserver - Property + - Reference - root translation_of: Web/API/IntersectionObserver/root --- -
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+
{{APIRef("Intersection Observer API")}}
-

La propriété en lecture seule root de l'interface {{domxref("IntersectionObserver")}} identifie l'{{domxref("Element")}} dont les bornes sont considérés comme le {{Glossary("bounding box")}} de la {{Glossary("viewport")}} pour l'élément qui est la cible de l'observateur. Si le root vaut null, alors les bornes de la fenêtre du document courant sont celles utilisées.

+

La propriété en lecture seule root de l'interface IntersectionObserver identifie l'Element ou le Document dont les bornes sont considérées comme la zone englobante (bounding box) de la zone d'affichage (viewport) au sein de laquelle les intersections avec la cible sont observées. Si root vaut null, ce sont les limites de la zone d'affichage (viewport) courantes qui sont utilisées.

-

Syntaxe

+

Syntaxe

-
var root = IntersectionObserver.root;
-
+
root = IntersectionObserver.root;
-

Valeur

+

Valeur

-

Un objet {{domxref("Element")}} dont la bordure du modèle de boîte est utilisée pour définir les limites de sa zone de visibilité afin de déterminer quelle proportion de l'élément cible est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'{{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}, les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.

+

Un objet Element ou Document dont la boîte englobante est utilisée pour définir les limites de la zone de visibilité utilisée pour déterminer la proportion de l'élément cible qui est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'IntersectionObserver() (voir options.rootMargin), les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.

-

Si root vaut null, alors les bornes de la fenêtre du document courant (c'est-à-dire la zone visible, permettant donc de visionner le document) sont celles utilisées.

+

Si root vaut null, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (viewport).

-

Spécifications

+

Exemple

+ +

Cet exemple définit la propriété border de l'élément racine de l'observateur d'intersection comme une ligne verte moyenne de 2 pixels grâce aux propriétés exposées par CSSOM.

+ +
observer.root.style.border = "2px solid #44aa44";
+ +

Spécifications

- - - - - - - - - - - - + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Définition initiale
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Définition initiale.
-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

{{Compat("api.IntersectionObserver.root")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.html b/files/fr/web/api/intersectionobserver/rootmargin/index.html index caacf6da30..87e13a1306 100644 --- a/files/fr/web/api/intersectionobserver/rootmargin/index.html +++ b/files/fr/web/api/intersectionobserver/rootmargin/index.html @@ -4,51 +4,50 @@ slug: Web/API/IntersectionObserver/rootMargin tags: - API - Intersection Observer + - Intersection Observer API - IntersectionObserver - - Propriété + - Property + - Reference - rootMargin translation_of: Web/API/IntersectionObserver/rootMargin ---
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
-

La propriété rootMargin en lecture seule de l'interface {{domxref("IntersectionObserver")}} est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS {{cssxref("margin")}}. Chaque côté de la zone rectangulaire représentée par rootMargin est ajouté au côté correspondant du {{domxref("IntersectionObserver.root", "root")}} dans le {{Glossary("bounding box")}} 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 du {{Glossary("bounding box")}} de l'élément racine.

+

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 {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} pour une explication plus approfondie à propos de la marge externe de l'élément racine et comment cela fonctionne avec le bounding box de ce même élément.

+

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

+

Syntaxe

-
var marginString = IntersectionObserver.rootMargin;
-
+
marginString = IntersectionObserver.rootMargin;
-

Valeur

+

Valeur

-

Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS {{cssxref("margin")}}, contenant les décalages pour un ou plusieurs côtés du bounding box de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes du bounding box de l'élément racine avant l'intersection entre la zone rectangulaire résultante la zone couverte par l'élément cible.

+

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'{{domxref("IntersectionObserver")}}. Le navigateur a la possibilté de modifier la valeur.

+

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. {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} décrit avec plus de détails comment rootMargin est utilisée.

+

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

+

Spécifications

- - - - - - - - - - - - + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}{{Spec2('IntersectionObserver')}}Définition initiale
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}{{Spec2('IntersectionObserver')}}Définition initiale.
-
-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

{{Compat("api.IntersectionObserver.rootMargin")}}

-
diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.html b/files/fr/web/api/intersectionobserver/thresholds/index.html index 1ec8f5c0a8..ec430bdedb 100644 --- a/files/fr/web/api/intersectionobserver/thresholds/index.html +++ b/files/fr/web/api/intersectionobserver/thresholds/index.html @@ -3,64 +3,55 @@ title: IntersectionObserver.thresholds slug: Web/API/IntersectionObserver/thresholds tags: - API + - Draft - Intersection Observer - Intersection Observer API - IntersectionObserver - - Propriété + - NeedsExample + - Property + - Reference translation_of: Web/API/IntersectionObserver/thresholds --- -
{{APIRef("Intersection Observer API")}}{{draft}}{{SeeCompatTable}}
+
{{APIRef("Intersection Observer API")}}
-

La propriété en lecture seule thresholds de l'interface {{domxref("IntersectionObserver")}} retourne la liste des seuils d'intersection spécifiés lorsque l'observateur a été instancié avec {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}. Si un unique ratio seuil a été donné comme valeur numérique à l'instanciation de l'objet, cette valeur sera un tableau contenant uniquement cette valeur.

+

La propriété en lecture seule thresholds de l'interface IntersectionObserver retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec IntersectionObserver(). Si un seul seuil a été fourni lors de l'instanciation de l'objet, cette propriété sera un tableau contenant cette unique valeur numérique.

-

Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour apprendre comment fonctionnent les seuils d'intersection.

+

Voir la section sur les seuils pour apprendre comment fonctionnent les seuils d'intersection.

-

Syntaxe

+

Syntaxe

-
let thresholds = IntersectionObserver.thresholds;
-
+
thresholds = IntersectionObserver.thresholds;
-

Valeur

+

Valeur

-

Un tableau de seuils d'intersection, originellement spécifié au moyen de la propriété threshold à l'instanciation d'un observateur. Si un unique observateur a été spécifié, sans être donné dans un tableau (valeur numérique), cette valeur se traduite comme un tableau d'un élément la contenant. Quelque fut l'ordre de votre tableau original de threshold, il sera trié par ordre croissant.

+

Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via options.threshold. Si un seul seuil a été fourni, sans être donné dans un tableau (avec une valeur numérique « brute » donc), la valeur de la propriété sera un tableau contenant cette unique valeur. Quel qu'ait été l'ordre du tableau fourni à l'origine, celui fournit par thresholds sera trié par ordre croissant.

-

Si aucune option threshold n'est donnée lorsque IntersectionObserver() est utilisé pour instantier l'observateur, la valeur de thresholds est par défaut définie à [0].

+

Si aucune option threshold n'est fournie lors de l'instanciation avec IntersectionObserver(), la valeur par défaut de thresholds est définie à [0].

-
-

Attention! Bien que l'objet d'options que vous pouvez spécifier lorsque vous créez un {{domxref("IntersectionObserver")}} a un champ nommé {{domxref("IntersectionObserver.threshold", "threshold")}}, cette propriété-ci s'appelle thresholds. Cela peut porter à confusion. Si vous utilisez thresholds par erreur comme nom du champ votre objet d'options, le tableau de thresholds va se retrouver égal à [0.0], ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.

+
+

Attention !

+

Bien que l'objet d'options qu'on peut spécifier à la création d'un IntersectionObserver possède une propriété champ nommée threshold, cette propriété-ci s'appelle thresholds (avec un « s » supplémentaire donc). Cela peut porter à confusion. Si vous utilisez thresholds par erreur comme nom pour la propriété de l'objet options, le tableau porté par thresholds va se retrouver égal à [0.0], ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.

-

Exemple

- -
// Instanciation d'un observateur, c'est l'objet d'options qui contient le tableau des seuils (propriété threshold)
-observateur = new IntersectionObserver(fonctionRappel, optionsObservateur)
-
- -

Puis faire simplement :

- -
observateur.thresholds
- -

Pour afficher la liste des seuils fournie à l'initialisation.

- -

Spécifications

+

Spécifications

- - - - - - - - - - - - + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}{{Spec2('IntersectionObserver')}}Initial definition
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}{{Spec2('IntersectionObserver')}}Définition initiale.
-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

{{Compat("api.IntersectionObserver.thresholds")}}

diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.html b/files/fr/web/api/intersectionobserver/unobserve/index.html index eb4b731432..188cd55d4e 100644 --- a/files/fr/web/api/intersectionobserver/unobserve/index.html +++ b/files/fr/web/api/intersectionobserver/unobserve/index.html @@ -4,71 +4,69 @@ slug: Web/API/IntersectionObserver/unobserve tags: - API - Intersection Observer - - IntersectionObserver API - - IntersectioonObserver - - Méthode + - Intersection Observer API + - IntersectionObserver + - Method - Reference + - unobserve translation_of: Web/API/IntersectionObserver/unobserve --- -
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+
{{APIRef("Intersection Observer API")}}
-

La méthode unobserve() de l'interface {{domxref("IntersectionObserver")}} indique à l'IntersectionObserver de cesser d'observer l'élément cible spécifié.

+

La méthode unobserve() de l'interface IntersectionObserver indique à l'objet IntersectionObserver courant de cesser d'observer l'élément cible spécifié.

-

Syntaxe

+

Syntaxe

-
IntersectionObserver.unobserve(cible);
+
IntersectionObserver.unobserve(target);
-

Paramètress

+

Paramètres

-
cible
-
L'{{domxref("Element")}} à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne jette pas d'erreur.
+
target
+
L'élément à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne lève pas d'exception.
-

Valeur de retour

+

Valeur de retour

undefined.

-
-
+

Exemple

-

Exemples

+

Ce fragment de code illustre la création d'un observateur, l'ajout d'un élément sous observation puis l'arrêt de cette d'observation.

-

Ce bout de code montre simplement la création d'un observateur, l'ajout d'un élément sous observation puis sa fin d'observation.

- -
let observer = new IntersectionObserver(fonctionRappel);
-observateur.observe(document.getElementById("élémentÀObserver"));
+
let observer = new IntersectionObserver(callback);
+observer.observe(document.getElementById("elementAObserver"));
 
 /* ... */
 
-observateur.unobserve(document.getElementById("élémentÀObserver"));

+observer.unobserve(document.getElementById("elementAObserver"));
-

Spécifications

+

Spécifications

- - - - - - - - - - - - + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

{{Compat("api.IntersectionObserver.unobserve")}}

-

Voir aussi

+

Voir aussi

-- cgit v1.2.3-54-g00ecf