Window: scrollY 属性

Baseline 广泛可用 *

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

Window 接口的只读属性 scrollY 返回文档当前垂直滚动的像素数。在现代浏览器中,此值是亚像素精度的,意味着它不一定是整数。你可以通过 scrollX 属性获取文档水平滚动的像素数。

一个双精度浮点值,表示文档当前从原点垂直滚动的像素数,正值表示内容向下滚动(以显示更多底部的内容)。更技术地说,scrollY 返回当前 视口 顶部边缘的 Y 坐标。如果文档根本没有向上或向下滚动,则 scrollY 为 0。如果没有视口,则返回值为 0。如果文档在亚像素精度设备上渲染,则返回值也是亚像素精度的,可能包含小数部分。

注意: 如果你需要一个整数值,可以使用 Math.round() 来对其进行四舍五入。

Safari 会通过更新 scrollY 来响应过滚动(除非禁用了默认的“回弹”效果,例如通过将 overscroll-behavior 设置为 none),而 Chrome 和 Firefox 则不会。例如,在 Safari 中,仅通过向上滚动到文档顶部,scrollY 就可能为负数。

此属性是只读的。要将窗口滚动到特定位置,请使用 Window.scroll()

示例

js
// make sure and go down to the second page
if (window.scrollY) {
  window.scroll(0, 0); // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);

注意

使用此属性来检查在使用相对滚动函数(如 scrollBy()scrollByLines()scrollByPages())时,文档尚未滚动。

pageYOffset 属性是 scrollY 属性的别名。这意味着如果你没有重新分配这两个属性中的任何一个,window.pageYOffset === window.scrollY 始终为 true。

规范

规范
CSSOM 视图模块
# dom-window-scrolly

浏览器兼容性

另见