aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/intersectionobserver/root
diff options
context:
space:
mode:
authortristantheb <tristantheb@users.noreply.github.com>2021-04-11 18:40:27 +0200
committerGitHub <noreply@github.com>2021-04-11 18:40:27 +0200
commit69d118500cccd88ca649d8bd12cf02019cd33a6d (patch)
tree13e1f3f4b4c298cdde28cd001f15aac92d3bfdb1 /files/fr/web/api/intersectionobserver/root
parent097f62d4849058efac03fed18974ba33bfbdd84e (diff)
downloadtranslated-content-69d118500cccd88ca649d8bd12cf02019cd33a6d.tar.gz
translated-content-69d118500cccd88ca649d8bd12cf02019cd33a6d.tar.bz2
translated-content-69d118500cccd88ca649d8bd12cf02019cd33a6d.zip
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 <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/api/intersectionobserver/root')
-rw-r--r--files/fr/web/api/intersectionobserver/root/index.html61
1 files changed, 37 insertions, 24 deletions
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>