HTML DOM scrollTop 属性

元素对象参考手册 元素对象

实例

滑动滚动条，获取元素滚动条到元素左边或顶部的距离:

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

尝试一下 »

定义和用法

scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

在使用显示比例缩放的系统上，scrollTop 可能会提供一个小数。

浏览器支持

属性
scrollTop Yes Yes Yes Yes Yes

语法

获取 scrollTop 属性值：

// 获得滚动的像素数
var intElemScrollTop = element.scrollTop

intElemScrollTop 是一个整数，即element的内容向上滚动的像素数。

设置 scrollLeft 属性值：

// 设置滚动的距离
element.scrollTop = intValue;

scrollTop 可以是任意整数，然而：

  • 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个 "non-scrollable" 属性）， scrollTop 将被设置为 0。
  • 设置 scrollTop的值小于 0，scrollTop 被设为 0
  • 如果设置了超出这个容器可滚动的值，scrollTop 会被设为最大值。

技术细节

返回值： 返回一个整数，表示该元素内容垂直滚动的像素数。

更多实例

实例

设置 ID 为 "myDIV" 元素水平方向滚动 50 像素，垂直方向滚动 10 像素:

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

尝试一下 »

实例

设置 ID 为 "myDIV" 元素在每次点击按钮时水平方向滚动 50 像素，垂直方向滚动 10 像素：

var elmnt = document.getElementById("content"); function getFunction() { var x = elmnt.scrollWidth; var y = elmnt.scrollHeight; } function setFunction() { elmnt.style.height = y.scrollHeight + "px"; elmnt.style.width = y.scrollWidth + "px"; }

尝试一下 »

元素对象参考手册 元素对象