From 9558e96c9073df1bd6b40c551661c2730586fc23 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sat, 27 Mar 2021 21:38:00 +0100 Subject: Fixes #331 (#341) * Fixes #331 - Revamped fr translation / brought to parity w/ en-US 9917bf1 and fixed example Co-authored-by: tristantheb --- files/fr/web/api/element/scrolltop/index.html | 137 ++++++++++++++++++-------- 1 file changed, 94 insertions(+), 43 deletions(-) (limited to 'files/fr/web/api/element') 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 --- -

{{ ApiRef() }}

-

Résumé

-

Définit ou obtient le nombre de pixels dont le contenu de l'élément a défilé vers le haut.

-

Syntaxe

-
// Obtient le nombre de pixels défilés
-var  intElemScrollTop = element.scrollTop;
+
{{APIRef("DOM")}}

+
+
La propriété Element.scrollTop permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.

+
+
La valeur scrollTop 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 scrollTop est 0.

+
+
Lorsque scrollTop est utilisé sur l'élément racine (c'est-à-dire l'élément <html>), c'est la valeur de scrollY pour la fenêtre qui est renvoyée. Il s'agit d'un cas aux limites pour scrollTop.

+
+

+
Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.

+

+
+
Syntaxe

+
+
// Obtenir le nombre de pixels qui ont défilé.
+var intElemScrollTop = someElement.scrollTop;
 

-
intElemScrollTop est un entier correspondant au nombre de pixels dont le contenu d'element a défilé vers le haut.

-
// Définit le nombre de pixels défilés
+
+
Après avoir exécuté le code ci-dessus, intElemScrollTop sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.

+
+
// Définir le nombre de pixels à faire défiler.
 element.scrollTop = intValue;
 

-
scrollTop peut avoir n'importe quelle valeur entière, cependant :

+
+
scrollTop peut être défini avec n'importe quelle valeur entière. Cependant :

+
 
    
- 
  • Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), scrollTop est mis à 0.
    • 
- 
  • S'il est défini à une valeur inférieure à 0, scrollTop est mis à 0.
    • 
- 
  • S'il est défini à une valeur plus grande que le maximum dont le contenu peut défiler, scrollTop est mis au maximum.
    • 
+ 
  • 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), scrollTop vaudra toujours 0.
    • 
+ 
  • scrollTop ne permet pas d'utiliser des valeurs négatives. Il revient à 0.
    • 
+ 
  • Si la valeur utilisée est supérieure à la valeur maximale possible pour l'élément, scrollTop prendra cette valeur maximale possible.
    • 
 

-
Description

-
L'attribut scrollTop 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.

-
Lorsqu'un élément ne génère pas de barre de défilement vertical, sa valeur scrollTop vaut 0.

-
Exemple

-

- 

-  
padding-top

-  
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.

-  
Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

-  
Cat image and text coming from www.best-cat-art.com

-  
padding-bottom

- 

- LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><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;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}

-
Image:scrollTop.png

-
Il n'est pas possible d'avoir une démonstration interactive dans cette référence.

-
Spécification

-
scrollTop fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

-
Notes

-
scrollTop est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle la distance entre le haut physique d'un élément et son affichage défilant.

-
Références

+
+
Exemple

+
+
HTML

+
+
<div id="container">
+  <div id="content">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!!</div>
+</div>
+
+<button id="slide" type="button">Défilez vers le bas</button>

+
+
CSS

+
+
#container {
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-y: scroll;
+}
+
+#content {
+  background-color: #ccc;
+}

+
+
JavaScript

+
+
const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollTop += 20;
+};

+
+
Résultat

+
+
{{EmbedLiveSample("Example")}}

+
+
+
Spécifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}

+
+
Compatibilité des navigateurs

+
+
{{Compat("api.Element.scrollTop")}}

+
+
Voir aussi

+
 
-
{{ languages( { "en": "en/DOM/element.scrollTop", "pl": "pl/DOM/element.scrollTop" } ) }}

-- 
cgit v1.2.3-54-g00ecf