Window scrollX 属性
示例 1
将内容滚动 100 像素,并显示 scrollX 和 scrollY 的值:
window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);亲自试一试 »
以下还有更多示例。
描述
scrollX 属性返回文档从窗口左上角滚动的像素数。
scrollX 属性为只读属性。
注意
scrollX 属性等于 pageXOffset 属性。
为了实现跨浏览器兼容性,请使用 window.pageXOffset 代替 window.scrollX。
另请参阅:
语法
window.scrollXor just:
scrollX
返回值
| 类型 | 描述 |
| 一个数字 | 文档从窗口左上角滚动的像素数。 |
更多示例
创建固定导航栏:
// 获取导航栏
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.scrollX 所有浏览器均支持:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
