Fixes #331 (#341)

* Fixes #331 - Revamped fr translation / brought to parity w/ en-US 9917bf1 and fixed example

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 94 insertions, 43 deletions

diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html
index dfd5c0f31a..0053f0ab7b 100644
--- a/files/fr/web/api/element/scrolltop/index.html
+++ b/files/fr/web/api/element/scrolltop/index.html
@@ -1,55 +1,106 @@
 ---
-title: element.scrollTop
+title: Element.scrollTop
 slug: Web/API/Element/scrollTop
 tags:
-  - Référence_du_DOM_Gecko
+  - API
+  - CSSOM View
+  - Property
+  - Reference
 translation_of: Web/API/Element/scrollTop
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Définit ou obtient le nombre de pixels dont le contenu de l'élément a défilé vers le haut.</p>
-<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
-<pre class="eval"><span style="color: rgb(153, 153, 153);">// Obtient le nombre de pixels défilés</span>
-<span style="color: rgb(128, 0, 128);">var</span> <var> intElemScrollTop</var> = <var>element</var>.scrollTop;
+<div>{{APIRef("DOM")}}</div>
+
+<p class="summary"><span class="seoSummary">La propriété <code><strong>Element.scrollTop</strong></code> permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.</span></p>
+
+<p>La valeur <code>scrollTop</code> d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de <code>scrollTop</code> est <code>0</code>.</p>
+
+<p>Lorsque <code>scrollTop</code> est utilisé sur l'élément racine (c'est-à-dire l'élément <code>&lt;html&gt;</code>), c'est la valeur de <code>scrollY</code> pour la fenêtre qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">Il s'agit d'un cas aux limites pour <code>scrollTop</code></a>.</p>
+
+<div class="notecard warning">
+<p>Pour les systèmes qui utilisent un affichage mis à l'échelle (<i>display scaling</i>), <code>scrollTop</code> peut fournir une valeur décimale.</p>
+</div>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush: js">// Obtenir le nombre de pixels qui ont défilé.
+var <var>intElemScrollTop</var> = someElement.scrollTop;
 </pre>
-<p><var>intElemScrollTop</var> est un entier correspondant au nombre de pixels dont le contenu d'<var>element</var> a défilé vers le haut.</p>
-<pre class="eval"><span style="color: rgb(153, 153, 153);">// Définit le nombre de pixels défilés</span>
+
+<p>Après avoir exécuté le code ci-dessus, <code>intElemScrollTop</code> sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.</p>
+
+<pre class="brush: js">// Définir le nombre de pixels à faire défiler.
 <var>element</var>.scrollTop = <var>intValue</var>;
 </pre>
-<p><strong>scrollTop</strong> peut avoir n'importe quelle valeur entière, cependant :</p>
+
+<p><code>scrollTop</code> peut être défini avec n'importe quelle valeur entière. Cependant :</p>
+
 <ul>
- <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollTop</code> est mis à 0.</li>
- <li>S'il est défini à une valeur inférieure à 0, <code>scrollTop</code> est mis à 0.</li>
- <li>S'il est défini à une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollTop</code> est mis au maximum.</li>
+ <li>S'il n'est pas possible de faire défiler l'élément (s'il ne dépasse d'aucune façon ou si une de ses propriétés le fixe ainsi), <code>scrollTop</code> vaudra toujours <code>0</code>.</li>
+ <li><code>scrollTop</code> ne permet pas d'utiliser des valeurs négatives. Il revient à <code>0</code>.</li>
+ <li>Si la valeur utilisée est supérieure à la valeur maximale possible pour l'élément, <code>scrollTop</code> prendra cette valeur maximale possible.</li>
 </ul>
-<h3 id="Description" name="Description">Description</h3>
-<p>L'attribut <b>scrollTop</b> d'un élément est la mesure de la distance entre le haut de cet élément et le point le plus haut de son contenu visible.</p>
-<p>Lorsqu'un élément ne génère pas de barre de défilement vertical, sa valeur <code>scrollTop</code> vaut 0.</p>
-<h3 id="Exemple" name="Exemple">Exemple</h3>
-<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
- <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
-  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
-  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
-  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
- </div>
- <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
-<p style="margin-top: 270px;"><img alt="Image:scrollTop.png"></p>
-<p>Il n'est pas possible d'avoir une démonstration interactive dans cette référence.</p>
-<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
-<p><code>scrollTop</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
-<h3 id="Notes" name="Notes">Notes</h3>
-<p><code>scrollTop</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle la distance entre le haut physique d'un élément et son affichage défilant.</p>
-<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<h2 id="Example">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div id="content"&gt;Utilisez le bouton :) Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!!&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;button id="slide" type="button"&gt;Défilez vers le bas&lt;/button&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-y: scroll;
+}
+
+#content {
+  background-color: #ccc;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollTop += 20;
+};</pre>
+
+<h3 id="Result">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.scrollTop")}}</p>
+
+<h2 id="See_also">Voir aussi</h2>
+
 <ul>
- <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrolltop.asp?frame=true">
-  <i>
-   scrollTop definition</i>
-  sur MSDN</a></li>
- <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">
-  <i>
-   Measuring Element Dimension and Location</i>
-  sur MSDN</a></li>
+ <li><a href="/fr/docs/Web/API/Element/scrollLeft"><code>Element.scrollLeft</code></a></li>
+ <li><a href="/fr/docs/Web/API/Element/scrollTo"><code>Element.scrollTo()</code></a></li>
 </ul>
-<p>{{ languages( { "en": "en/DOM/element.scrollTop", "pl": "pl/DOM/element.scrollTop" } ) }}</p>