Element：scrollTop 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Element.scrollTop 属性可以获取或设置元素内容从其顶部边缘滚动的像素数。在现代浏览器中，该值是亚像素精度的，这意味着它不一定是一个整数。

值

一个双精度浮点值，表示元素当前从原点垂直滚动的像素数，其中正值表示元素向下滚动（以显示更多底部的内容）。如果元素根本没有向上或向下滚动，则 scrollTop 为 0。如果文档不是活动文档，则返回值为 0。如果文档在亚像素精度设备上呈现，则返回的值也是亚像素精度的，可能包含小数部分。

如果元素可以从初始包含块向上滚动，则 scrollTop 可能为负。例如，如果元素的 flex-direction 是 column-reverse，并且内容向上增长，那么当滚动条位于其最底部位置（在滚动内容的开始处）时，scrollTop 为 0，然后当你向内容末尾滚动时，其值逐渐向负方向增长。

Safari 通过将 scrollTop 更新到最大滚动位置之外来响应过度滚动（除非禁用默认的“反弹”效果，例如将 overscroll-behavior 设置为 none），而 Chrome 和 Firefox 则不会。例如，在 Safari 浏览器上，当元素已经位于顶部时继续向上滚动，scrollTop 可能会变为负值。

通过设置 scrollTop 属性，可以让元素在垂直方向滚动到指定位置，和使用 Element.scroll() 设置 behavior: "auto" 效果一致。

示例

滚动元素

在这个示例中，尝试滚动带有虚线边框的内部容器，看看 scrollTop 的值是如何变化的。

HTML

html
<div id="container">
  <div id="scroller">
    <p>
      在银河系西旋臂少人问津的末端、未经勘测的荒僻区域深处，有一颗无人理睬的小小黄色恒星。以约莫九千两百万英里半径绕其旋转的，是一颗彻底无关紧要的小小蓝绿色行星，这上面从猿猴繁衍而来的生命形式原始得让人吃惊，居然还以为数字式电子表是什么很高明的主意。
    </p>
  </div>
</div>

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

CSS

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

#output {
  padding: 1rem 0;
}

JavaScript

js
const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");

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

结果

规范

Specification
CSSOM View Module
# dom-element-scrolltop

浏览器兼容性

BCD tables only load in the browser

参见