Propriété scrollTop de l'élément HTML DOM

Définition et utilisation

scrollTop Définit et utilise la propriété scrollTop de l'élément HTML DOM pour obtenir le nombre de pixels de défilement vertical du contenu de l'élément.

Voir également :

Propriété scrollLeft

Attribut overflow CSS

Événement onscroll

Exemple

Exemple 1

Obtenez le nombre de pixels de défilement du contenu du "myDIV" :

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

亲自试一试

Exemple 2

Déplacez le contenu horizontal du "myDIV" à 50 pixels et le contenu vertical à 10 pixels :

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

亲自试一试

Exemple 3

Déplacez le contenu horizontal du "myDIV" de 50 pixels et le contenu vertical de 10 pixels :

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

亲自试一试

例子 4

将 <body> 的内容水平滚动 30 像素，垂直滚动 10 像素：

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

亲自试一试

例子 5

在不同滚动位置的类名之间切换 - 当用户从页面顶部向下滚动 50 像素时，类名 "test" 将被添加到元素中（并在再次向上滚动时删除）：

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

亲自试一试

例子 6

当用户从页面顶部向下滚动 350 像素时滑入一个元素（添加 slideUp 类）：

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

亲自试一试

语法

返回 scrollTop 属性：

element.scrollTop

设置 scrollTop 属性：

element.scrollTop = pixels

属性值

值 描述
pixels

元素内容垂直滚动的像素数。

  • 如果该数字为负数，则该数字设置为 0。
  • 如果元素无法滚动，则该数字设置为 0。
  • 如果该数大于允许的最大值，则将该数设置为最大值。

返回值

类型 描述
数字 元素内容垂直滚动的像素数。

浏览器支持

所有浏览器都支持 element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support