Window scrollY 属性

定义和用法

scrollY 属性返回文档从窗口左上角滚动的像素。

scrollY 属性是只读的。

提示

scrollY 属性等于 pageYOffset 属性。

为了跨浏览器兼容性，请使用 window.pageYOffset 而不是 window.scrollY。

另请参阅：

pageXOffset 属性

pageYOffset 属性

实例

例子 1

将内容滚动 100 像素，并提示 scrollX 和 scrollY：

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

亲自试一试

例子 2

创建粘性导航栏：

// 获取导航栏
const navbar = document.getElementById("navbar");

// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;

// 当您到达其滚动位置时，将 sticky 类添加到导航栏。离开滚动位置时删除 sticky 类。
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

亲自试一试

语法

window.scrollY

或者：

scrollY

返回值

类型 描述
数字 文档从窗口左上角滚动的像素数。

浏览器支持

所有浏览器都支持 window.scrollY：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持