码农教程 - 一技在手,衣食无忧! tools

目录

window scrollX

❮上一节 ❮ 窗口对象参考 下一节❯

示例1

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

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);
亲自试一试 »

下面有更多示例。

描述

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

这个scrollX属性是只读的。

笔记

这个scrollX属性等于pageXOffset属性。

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

也可以看看：

pageXOffset 属性

pageYOffset 属性

语法

window.scrollX
scrollX

返回值

类型 描述
一个号码 文档从窗口左上角滚动的像素数。

更多示例

创建粘性导航栏：

// Get the navbar
const navbar = document.getElementById("navbar");

// Get the offset position of the navbar
const sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
亲自试一试 »

浏览器支持

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

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11


❮上一节 ❮ 窗口对象参考 下一节❯