Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Element.scrollTop
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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 valeurscrollTop 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 descrollTop est0.
LorsquescrollTop est utilisé sur l'élément racine (c'est-à-dire l'élément<html>), c'est la valeur descrollY pour la fenêtre qui est renvoyée.Il s'agit d'un cas aux limites pourscrollTop.
Attention :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;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 être défini avec n'importe quelle valeur entière. Cependant :
- 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),
scrollTopvaudra toujours0. scrollTopne 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,
scrollTopprendra cette valeur maximale possible.
Exemple
HTML
<div> <div> 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 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
Spécifications
| Specification |
|---|
| CSSOM View Module # dom-element-scrolltop |