元素：scrollTop 属性

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

价值

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

如果元素可以从初始包含块向上滚动，则 scrollTop 可能为负值。例如，如果元素的 flex-direction 为 column-reverse 且内容向上增长，则当滚动条位于最底部位置（滚动内容的开头）时，scrollTop 为 0，然后随着你向内容末尾滚动，scrollTop 会越来越负。

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

可以设置 scrollTop 属性，这会导致元素滚动到指定垂直位置，就像使用 Element.scroll() 且 behavior: "auto" 一样。

示例

滚动元素

在本例中，尝试滚动带虚线边框的内部容器，并查看 scrollTop 的值如何变化。

HTML

html
<div id="container">
  <div id="scroller">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </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}`;
});

结果

规范

规范
CSSOM 视图模块
# dom-element-scrolltop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅