Element : propriété scrollTop

Valeur

Une valeur en virgule flottante double précision indiquant le nombre de pixels par lequel l'élément est actuellement défilé verticalement depuis l'origine, où une valeur positive signifie que l'élément est défilé vers le bas (pour révéler plus de contenu en bas). Si l'élément n'est pas du tout défilé vers le haut ou vers le bas, alors scrollTop vaut 0. Si le document n'est pas le document actif, la valeur retournée est 0. Si le document est rendu sur un appareil précis au sous-pixel, la valeur retournée est également précise au sous-pixel et peut contenir une composante décimale.

Il est possible que scrollTop soit négatif si l'élément peut être défilé vers le haut depuis le bloc contenant initial. Par exemple, si la flex-direction de l'élément est column-reverse et que le contenu croît vers le haut, alors scrollTop vaut 0 lorsque la barre de défilement est à sa position la plus basse (au début du contenu défilé), puis devient de plus en plus négatif à mesure que vous faites défiler vers la fin du contenu.

Safari réagit au dépassement du défilement en mettant à jour scrollTop au-delà de la position de défilement maximale (sauf si l'effet de « rebond » par défaut est désactivé, par exemple en définissant overscroll-behavior sur none), tandis que Chrome et Firefox ne le font pas. Par exemple, scrollTop peut être négatif sur Safari simplement en continuant à faire défiler vers le haut lorsque l'élément est déjà en haut.

La propriété scrollTop peut être définie, ce qui provoque le défilement de l'élément à la position verticale définie, de la même manière que l'utilisation de Element.scroll() avec behavior: "auto".

Exemples

Faire défiler un élément

Dans cet exemple, essayez de faire défiler le conteneur avec la bordure en pointillés, et voyez comment la valeur de scrollTop change.

HTML

<div id="conteneur">
  <p>
    Loin dans les contrées inexplorées de l'extrémité démodée du bras spiral
    occidental de la Galaxie se trouve un petit soleil jaune négligé. Orbitant
    autour de celui-ci à une distance d'environ quatre-vingt-douze millions de
    miles se trouve une petite planète bleue-verte insignifiante dont les formes
    de vie descendues des singes sont si incroyablement primitives qu'elles
    pensent encore que les montres numériques sont une idée assez géniale.
  </p>
</div>

<div id="sortie">scrollTop: 0</div>

CSS

#conteneur {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#sortie {
  padding: 1rem 0;
}

JavaScript

const conteneur = document.querySelector("#conteneur");
const sortie = document.querySelector("#sortie");

conteneur.addEventListener("scroll", (event) => {
  sortie.textContent = `scrollTop: ${conteneur.scrollTop}`;
});

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Déterminer la taille des éléments
• La propriété HTMLElement.offsetTop
• La propriété Element.clientTop
• La propriété Element.scrollHeight
• La propriété Element.scrollWidth
• La propriété Element.scrollLeft
• La méthode Element.getBoundingClientRect()
• La méthode Element.scrollTo()