diff options
Diffstat (limited to 'files/fr/web/api/intersectionobserver')
7 files changed, 273 insertions, 273 deletions
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 --- -<div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div> +<div>{{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 class="summary">L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/fr/docs/Web/API/Intersection_Observer_API">API <i>Intersection Observer</i></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 (<a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a>). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.</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> +<p>Lorsqu'un objet implémentant <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ée après initialisation de l'<code>IntersectionObserver</code>. 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.</p> -<h2 id="Constructeur">Constructeur</h2> +<h2 id="constructor">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> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver.IntersectionObserver()</code></a> {{Experimental_inline}}</dt> + <dd>Crée un nouvel objet <code>IntersectionObserver</code> 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.</dd> </dl> -<h2 id="Propriétés">Propriétés</h2> +<h2 id="properties">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> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/root"><code>IntersectionObserver.root</code></a> {{readonlyinline}} {{Experimental_inline}}</dt> + <dd>L'<a href="/fr/docs/Web/API/Element">élément</a> ou le <a href="/fr/docs/Web/API/Document">document</a> 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 <code>null</code>, c'est la zone d'affichage (<i>viewport</i>) de plus haut niveau qui est utilisée.</dd> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/rootMargin"><code>IntersectionObserver.rootMargin</code></a> {{readonlyinline}} {{Experimental_inline}}</dt> + <dd>Un rectangle de décalage appliqué à <a href="/fr/docs/Glossary/bounding_box">la boîte englobante</a> 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 <code>"0px 0px 0px 0px"</code>.</dd> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/thresholds"><code>IntersectionObserver.thresholds</code></a> {{readonlyinline}} {{Experimental_inline}}</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 utilisé comme seuil par défaut.</dd> </dl> -<h2 id="Méthodes">Méthodes</h2> +<h2 id="methods">Méthodes</h2> <dl> - <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/disconnect"><code>IntersectionObserver.disconnect()</code></a> {{Experimental_inline}}</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> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>IntersectionObserver.observe()</code></a> {{Experimental_inline}}</dt> + <dd>Indique à l'objet <code>IntersectionObserver</code> un nouvel élément à observer.</dd> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/takeRecords"><code>IntersectionObserver.takeRecords()</code></a> {{Experimental_inline}}</dt> + <dd>Retourne un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a> pour toutes les cibles observées et cesse de surveiller chacune d'elles.</dd> + <dt><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a> {{Experimental_inline}}</dt> + <dd>Indique à l'objet <code>IntersectionObserver</code> de cesser d'observer un élément cible particuler.</dd> </dl> -<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function (entrées) { +<h2 id="example">Exemple</h2> + +<pre class="brush: js">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"));</pre> +// début de l'observation +intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">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> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <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> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.IntersectionObserver")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/MutationObserver"><code>MutationObserver</code></a></li> + <li><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></li> + <li><a href="/fr/docs/Web/API/ResizeObserver"><code>ResizeObserver</code></a></li> +</ul> 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 --- -<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> +<div>{{APIRef("Intersection Observer API")}}</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> +<p class="summary">Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Les marges appliquées à la zone racine (indiquée dans l'objet <code>options</code> via la propriété <code>rootMargin</code>, 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é <code>thresholds</code> d'<code>options</code>) 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].</p> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntax">Syntaxe</h2> -<pre class="syntaxbox">let <em>observer</em> = new IntersectionObserver(<em>fonctionRappel[, </em><em>options</em>]);</pre> +<pre class="syntaxbox">let <var>observer</var> = new IntersectionObserver(<var>callback</var>[, <var>options</var>]);</pre> -<h3 id="Paramètres">Paramètres</h3> +<h3 id="parameters">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> + <dt><code>callback</code></dt> + <dd>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 : + <dl> + <dt><code>entries</code></dt> + <dd>Une liste d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, chacun représentant un seuil 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'objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> 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 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 : + <dl> + <dt><code>root</code></dt> + <dd>Un objet <a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou <a href="/fr/docs/Web/API/Document"><code>Document</code></a> 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 (<i>viewport</i>). 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.</dd> + <dt><code>rootMargin</code></dt> + <dd>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 <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>. Voir <a href="/fr/docs/Web/API/Intersection_Observer_API">L'élément racine et sa marge externe</a> pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est <code>"0px 0px 0px 0px"</code>.</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 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 <a href="/fr/docs/Web/API/Intersection_Observer_API#Thresholds">cette section sur les seuils</a> 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> +<h3 id="return_value">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> +<p>Un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> 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 <a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>observe()</code></a> de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.</p> -<h3 id="Erreurs">Erreurs</h3> +<h3 id="exceptions">Exceptions</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> + <dt><code>SyntaxError</code></dt> + <dd>La propriété <code>rootMargin</code> de l'argument <code>options</code> est invalide.</dd> + <dt><code>RangeError</code></dt> + <dd>Une ou plusieurs des valeurs de <code>threshold</code> (portée par l'argument <code>options</code>) est en dehors de l'intervalle allant de 0.0 à 1.0.</dd> </dl> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="example">Exemple</h2> + +<p>Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction <code>myObserverCallback</code> chaque fois que la zone visible de l'élément observé change d'au moins 10%.</p> + +<pre class="brush: js">let observer = new IntersectionObserver(myObserverCallback, { + threshold: 0.1 +});</pre> + +<h2 id="specifications">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> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <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> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <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 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 --- <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 class="summary">La méthode <code><strong>observe()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. 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 <a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a>.</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> +<p>Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans <a href="/fr/docs/Web/API/IntersectionObserver/thresholds"><code>IntersectionObserver.thresholds</code></a>, la fonction de rappel de l'observateur est executée avec comme argument un objet <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a> 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> +<h2 id="syntax">Syntaxe</h2> -<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(cible);</pre> +<pre class="syntaxbox"><var>IntersectionObserver</var>.observe(<var>targetElement</var>);</pre> -<h3 id="Paramètres">Paramètres</h3> +<h3 id="parameters">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> + <dt><code>targetElement</code></dt> + <dd>Un <a href="/fr/docs/Web/API/Element">élément</a> 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).</dd> </dl> -<h3 id="Valeur_de_retour">Valeur de retour</h3> +<h3 id="return_value">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> +<h2 id="specifications">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> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <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> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.IntersectionObserver.observe")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{domxref("IntersectionObserver.unobserve()")}}</li> + <li><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a></li> </ul> 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 --- -<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> +<div>{{APIRef("Intersection Observer API")}}</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> +<p class="summary">La propriété en lecture seule <strong><code>root</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> identifie l'<a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou le <a href="/fr/docs/Web/API/Document"><code>Document</code></a> dont les bornes sont considérées comme la zone englobante (<i>bounding box</i>) de la zone d'affichage (<i>viewport</i>) au sein de laquelle les intersections avec la cible sont observées. Si <code>root</code> vaut <code>null</code>, ce sont les limites de la zone d'affichage (<i>viewport</i>) courantes qui sont utilisées.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntax">Syntaxe</h2> -<pre class="syntaxbox"><var><code>var <em>root</em> = </code>IntersectionObserver</var>.root; -</pre> +<pre class="syntaxbox"><var>root</var> = IntersectionObserver.root;</pre> -<h3 id="Valeur">Valeur</h3> +<h3 id="value">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>Un objet <a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou <a href="/fr/docs/Web/API/Document"><code>Document</code></a> 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'<a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver()</code></a> (voir <code>options.rootMargin</code>), 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> +<p>Si <code>root</code> vaut <code>null</code>, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (<i>viewport</i>).</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="example">Exemple</h2> + +<p>Cet exemple définit la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> 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.</p> + +<pre class="brush: js">observer.root.style.border = "2px solid #44aa44";</pre> + +<h2 id="specifications">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> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <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> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.IntersectionObserver.root")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Mesurer la visibilité d'un élément dans le temps l'API <i>Intersection Observer</i></a></li> +</ul> 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 --- <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>La propriété <strong><code>rootMargin</code></strong> est une propriété en lecture seule de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>. Chaque côté de la zone rectangulaire représentée par <code>rootMargin</code> est ajouté au côté correspondant de la boîte englobante de la <a href="/fr/docs/Web/API/IntersectionObserver/root">racine</a> 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.</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> +<p>Voir <a href="/fr/docs/Web/API/Intersection_Observer_API">la section sur l'élément racine et sa marge externe</a> pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntax">Syntaxe</h2> -<pre class="syntaxbox"><var><code>var <em>marginString</em> = </code>IntersectionObserver</var>.rootMargin; -</pre> +<pre class="syntaxbox"><var>marginString</var> = IntersectionObserver.rootMargin;</pre> -<h3 id="Valeur">Valeur</h3> +<h3 id="value">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>Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, 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.</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>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'<a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Le navigateur a la possibilité 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> +<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. <a href="/fr/docs/Web/API/Intersection_Observer_API">La section sur l'élément racine et sa marge externe</a> décrit avec plus de détails comment <code>rootMargin</code> est utilisée.</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">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> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <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> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <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 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 --- -<div>{{APIRef("Intersection Observer API")}}{{draft}}{{SeeCompatTable}}</div> +<div>{{APIRef("Intersection Observer API")}}</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>La propriété en lecture seule <strong><code>thresholds</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver()</code></a>. 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.</p> -<p>Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour apprendre comment fonctionnent les seuils d'intersection.</p> +<p>Voir <a href="/fr/docs/Web/API/Intersection_Observer_API#Thresholds">la section sur les seuils</a> pour apprendre comment fonctionnent les seuils d'intersection.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntax">Syntaxe</h2> -<pre class="syntaxbox"><var><code><em>let thresholds</em> = </code>IntersectionObserver</var>.thresholds; -</pre> +<pre class="syntaxbox"><var>thresholds</var> = IntersectionObserver.thresholds;</pre> -<h3 id="Valeur">Valeur</h3> +<h3 id="value">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>Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via <code>options.threshold</code>. 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 <code>thresholds</code> 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> +<p>Si aucune option <code>threshold</code> n'est fournie lors de l'instanciation avec <code>IntersectionObserver()</code>, la valeur par défaut de <code>thresholds</code> est 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 class="notecard warning"> + <p><b>Attention !</b></p> + <p>Bien que l'objet d'<code>options</code> qu'on peut spécifier à la création d'un <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> possède une propriété champ nommée <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>threshold</code></a>, cette propriété-ci s'appelle <code>thresholds</code> (avec un « s » supplémentaire donc). <em>Cela peut porter à confusion</em>. Si vous utilisez <code>thresholds</code> par erreur comme nom pour la propriété de l'objet <code>options</code>, le tableau porté par <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> +<h2 id="specifications">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> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}</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> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <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 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 --- -<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> +<div>{{APIRef("Intersection Observer API")}}</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> +<p class="summary">La méthode <code><strong>unobserve()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> indique à l'objet <code>IntersectionObserver</code> courant de cesser d'observer l'élément cible spécifié.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntax">Syntaxe</h2> -<pre class="syntaxbox"><em>IntersectionObserver</em>.unobserve(cible);</pre> +<pre class="syntaxbox"><var>IntersectionObserver</var>.unobserve(<var>target</var>);</pre> -<h3 id="Paramètress">Paramètress</h3> +<h3 id="parameters">Paramètres</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> + <dt><code>target</code></dt> + <dd>L'<a href="/fr/docs/Web/API/Element"><code>élément</code></a> à 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.</dd> </dl> -<h3 id="Valeur_de_retour">Valeur de retour</h3> +<h3 id="return_value">Valeur de retour</h3> <p><code>undefined</code>.</p> -<dl> -</dl> +<h2 id="example">Exemple</h2> -<h2 id="Exemples">Exemples</h2> +<p>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.</p> -<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")); +<pre class="brush: js">let observer = new IntersectionObserver(callback); +observer.observe(document.getElementById("elementAObserver")); /* ... */ -observateur.unobserve(document.getElementById("élémentÀObserver"));</pre> +observer.unobserve(document.getElementById("elementAObserver"));</pre> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">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> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <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> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.IntersectionObserver.unobserve")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">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> + <li><a href="/fr/docs/Web/API/Intersection_Observer_API">L'API <i>Intersection Observer</i></a></li> + <li><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>IntersectionObserver.observe()</code></a></li> </ul> |