diff options
Diffstat (limited to 'files/fr/web/api/intersectionobserver')
7 files changed, 487 insertions, 0 deletions
diff --git a/files/fr/web/api/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/index.html new file mode 100644 index 0000000000..6561632d3e --- /dev/null +++ b/files/fr/web/api/intersectionobserver/index.html @@ -0,0 +1,89 @@ +--- +title: IntersectionObserver +slug: Web/API/IntersectionObserver +tags: + - API + - Experimental + - Interface + - IntersectionObserver + - Observation + - Visibilité +translation_of: Web/API/IntersectionObserver +--- +<div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div> + +<p><span class="seoSummary">L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> 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')}}.</span> L'ancêtre ou la fenêtre du document racine est alors appelé racine.</p> + +<p>Lorsqu'un <code>IntersectionObserver</code> 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'<code>IntersectionObserver</code>, 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.</p> + +<h2 id="Constructeur">Constructeur</h2> + +<dl> + <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt> + <dd>Crée un nouvel objet <code>IntersectionObserver</code> 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.</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt> + <dd>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 <code>null</code>, la fenêtre du document racine est utilisée.</dd> + <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt> + <dd> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>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.</span> <span>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.</span> <span>Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%).</span> <span>La valeur par défaut est "0px 0px 0px 0px".</span></span></div> + </div> + </dd> + <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt> + <dd>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.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt> + <dd>Indique à l'objet <code>IntersectionObserver</code> de ne plus observer aucune cible.</dd> + <dt>{{domxref("IntersectionObserver.observe()")}}</dt> + <dd>Indique à l'<code>IntersectionObserver</code> un nouvel élément à observer.</dd> + <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt> + <dd>Retourne un tableau d'objets {{domxref("IntersectionObserverEntry")}} pour toutes les cibles observées et cesse de surveiller chacune d'elles.</dd> + <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt> + <dd>Indique à l'<code>IntersectionObserver</code> de cesser d'observer un élément cible particuler.</dd> + <dt> + <h2 id="Exemples">Exemples</h2> + </dt> +</dl> + +<pre class="brush: js">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"));</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('IntersectionObserver')}}</td> + <td>{{Spec2('IntersectionObserver')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver")}}</p> diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html new file mode 100644 index 0000000000..f9cd0084ab --- /dev/null +++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html @@ -0,0 +1,81 @@ +--- +title: IntersectionObserver.IntersectionObserver() +slug: Web/API/IntersectionObserver/IntersectionObserver +tags: + - API + - Constructeur + - Constructor + - Intersection Observer + - IntersectionObserver + - IntersectionObserver API + - Reference +translation_of: Web/API/IntersectionObserver/IntersectionObserver +--- +<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> + +<p><span class="seoSummary">Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet {{domxref("IntersectionObserver")}}.</span> Le <code>rootMargin</code> (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].</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">let <em>observer</em> = new IntersectionObserver(<em>fonctionRappel[, </em><em>options</em>]);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>fonctionRappel</code></dt> + <dd>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: + <dl> + <dt><code>entrées</code></dt> + <dd>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.</dd> + <dt><code>observateur</code></dt> + <dd>L'{{domxref("IntersectionObserver")}} pour lequel la fonction de rappel est invoquée.</dd> + </dl> + </dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>un objet optionnel qui paramètre l'observateur. Si <code>options</code> 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 : + <dl> + <dt><code>root</code></dt> + <dd>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 <code>root</code> n'est pas considérée visible.</dd> + <dt><code>rootMargin</code></dt> + <dd>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".</dd> + <dt><code>threshold</code></dt> + <dd>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.</dd> + </dl> + </dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouvel {{domxref("IntersectionObserver")}} pouvant être utilisé pour observer la visibilité d'un élément cible au sein de l'élément <code>root</code> 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.</p> + +<h3 id="Erreurs">Erreurs</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Le <code>rootMargin</code> spécifié est invalide.</dd> + <dt>RangeError</dt> + <dd>Une ou plusieurs des valeurs du <code>threshold</code> est en dehors de l'intervalle allant de 0.0 à 1.0.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td> + <td>{{Spec2('IntersectionObserver')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p> diff --git a/files/fr/web/api/intersectionobserver/observe/index.html b/files/fr/web/api/intersectionobserver/observe/index.html new file mode 100644 index 0000000000..a9dd23b18b --- /dev/null +++ b/files/fr/web/api/intersectionobserver/observe/index.html @@ -0,0 +1,75 @@ +--- +title: IntersectionObserver.observe() +slug: Web/API/IntersectionObserver/observe +tags: + - API + - Intersection Observer + - IntersectionObserver + - IntersectionObserver API + - Méthode + - Reference + - observe +translation_of: Web/API/IntersectionObserver/observe +--- +<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> + +<p>La méthode <code><strong>observe()</strong></code> de l'interface {{domxref("IntersectionObserver")}} ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. 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()")}}.</p> + +<p>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 <code>IntersectionObserverEntry</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(cible);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>cible</code></dt> + <dd>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).</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p><code>undefined</code>.</p> + + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js"> // Créer l'observateur + let observateur = new IntersectionObserver(fonctionRappel, optionsObservateur); +</pre> + +<p>Faire observer un élément par l'observateur :</p> + +<pre class="brush: js">observateur.observe(cible);</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td> + <td>{{Spec2('IntersectionObserver')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver.observe")}}</p> + + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("IntersectionObserver.unobserve()")}}</li> +</ul> diff --git a/files/fr/web/api/intersectionobserver/root/index.html b/files/fr/web/api/intersectionobserver/root/index.html new file mode 100644 index 0000000000..755208e8ae --- /dev/null +++ b/files/fr/web/api/intersectionobserver/root/index.html @@ -0,0 +1,48 @@ +--- +title: IntersectionObserver.root +slug: Web/API/IntersectionObserver/root +tags: + - API + - Intersection Observer + - IntersectionObserver + - Property + - root +translation_of: Web/API/IntersectionObserver/root +--- +<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>root</code></strong> 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 <code>root</code> vaut <code>null</code>, alors les bornes de la fenêtre du document courant sont celles utilisées.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><code>var <em>root</em> = </code>IntersectionObserver</var>.root; +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>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.</p> + +<p>Si <code>root</code> vaut <code>null</code>, 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.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td> + <td>{{Spec2('IntersectionObserver')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver.root")}}</p> diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.html b/files/fr/web/api/intersectionobserver/rootmargin/index.html new file mode 100644 index 0000000000..caacf6da30 --- /dev/null +++ b/files/fr/web/api/intersectionobserver/rootmargin/index.html @@ -0,0 +1,54 @@ +--- +title: IntersectionObserver.rootMargin +slug: Web/API/IntersectionObserver/rootMargin +tags: + - API + - Intersection Observer + - IntersectionObserver + - Propriété + - rootMargin +translation_of: Web/API/IntersectionObserver/rootMargin +--- +<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>rootMargin</code></strong> 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 <code>rootMargin</code> 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.</p> + +<p>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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><code>var <em>marginString</em> = </code>IntersectionObserver</var>.rootMargin; +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>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.</p> + +<p>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.</p> + +<p>Si <code>rootMargin</code> n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra <code>"0px 0px 0px 0px"</code>, 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 <code>rootMargin</code> est utilisée.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td> + <td>{{Spec2('IntersectionObserver')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<div> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p> +</div> diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.html b/files/fr/web/api/intersectionobserver/thresholds/index.html new file mode 100644 index 0000000000..1ec8f5c0a8 --- /dev/null +++ b/files/fr/web/api/intersectionobserver/thresholds/index.html @@ -0,0 +1,66 @@ +--- +title: IntersectionObserver.thresholds +slug: Web/API/IntersectionObserver/thresholds +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Propriété +translation_of: Web/API/IntersectionObserver/thresholds +--- +<div>{{APIRef("Intersection Observer API")}}{{draft}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>thresholds</code></strong> 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.</p> + +<p>Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour apprendre comment fonctionnent les seuils d'intersection.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><code><em>let thresholds</em> = </code>IntersectionObserver</var>.thresholds; +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un tableau de seuils d'intersection, originellement spécifié au moyen de la propriété <code>threshold</code> à 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 <code>threshold</code>, il sera trié par ordre croissant.</p> + +<p>Si aucune option <code>threshold</code> n'est donnée lorsque <code>IntersectionObserver()</code> est utilisé pour instantier l'observateur, la valeur de <code>thresholds</code> est par défaut définie à <code>[0]</code>.</p> + +<div class="note"> +<p>Attention! Bien que l'objet d'<code>options</code> 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 <code>thresholds</code>. Cela peut porter à confusion. Si vous utilisez <code>thresholds</code> par erreur comme nom du champ votre objet d'<code>options</code>, le tableau de <code>thresholds</code> va se retrouver égal à <code>[0.0]</code>, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.</p> +</div> + +<h2 id="Exemple">Exemple</h2> + +<pre class="syntaxbox">// Instanciation d'un observateur, c'est l'objet d'options qui contient le tableau des seuils (propriété threshold) +observateur = new IntersectionObserver(fonctionRappel, optionsObservateur) +</pre> + +<p>Puis faire simplement :</p> + +<pre class="syntaxbox">observateur.thresholds</pre> + +<p>Pour afficher la liste des seuils fournie à l'initialisation.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}</td> + <td>{{Spec2('IntersectionObserver')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver.thresholds")}}</p> diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.html b/files/fr/web/api/intersectionobserver/unobserve/index.html new file mode 100644 index 0000000000..eb4b731432 --- /dev/null +++ b/files/fr/web/api/intersectionobserver/unobserve/index.html @@ -0,0 +1,74 @@ +--- +title: IntersectionObserver.unobserve() +slug: Web/API/IntersectionObserver/unobserve +tags: + - API + - Intersection Observer + - IntersectionObserver API + - IntersectioonObserver + - Méthode + - Reference +translation_of: Web/API/IntersectionObserver/unobserve +--- +<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> + +<p><span class="seoSummary">La méthode <code><strong>unobserve()</strong></code> de l'interface {{domxref("IntersectionObserver")}} indique à l'<code>IntersectionObserver</code> de cesser d'observer l'élément cible spécifié.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>IntersectionObserver</em>.unobserve(cible);</pre> + +<h3 id="Paramètress">Paramètress</h3> + +<dl> + <dt><code>cible</code></dt> + <dd>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.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p><code>undefined</code>.</p> + +<dl> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>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.</p> + +<pre class="brush: js">let observer = new IntersectionObserver(fonctionRappel); +observateur.observe(document.getElementById("élémentÀObserver")); + +/* ... */ + +observateur.unobserve(document.getElementById("élémentÀObserver"));</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td> + <td>{{Spec2('IntersectionObserver')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver.unobserve")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li> + <li>{{domxref("IntersectionObserver.observe()")}}</li> +</ul> |