Window pageXOffset 和 pageYOffset 属性
实例
垂直和水平滚动 100 个像素的内容，并弹出 pageXOffset 和 pageYOffset:
window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);
亲自试一试 »
alert(window.pageXOffset + window.pageYOffset);
页面下方有更多实例。
定义和用法
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。
这些属性是只读的。
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| pageXOffset | Yes | 9.0 | Yes | Yes | Yes |
| pageYOffset | Yes | 9.0 | Yes | Yes | Yes |
注释: IE 8 及 更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性 。
语法
window.pageXOffset
window.pageYOffset
window.pageYOffset
技术细节
| 返回值: | 一个数值，表示文档已从窗口左上角水平和垂直滚动的像素数 |
|---|
更多实例
实例
跨浏览器兼容解决方案（对于IE8及更早版本，使用scrollLeft和scrollTop）:
window.scrollBy(100, 100);
if (window.pageXOffset !== undefined) { // All browsers, except IE9 and earlier
alert(window.pageXOffset + window.pageYOffset);
} else { // IE9 and earlier
alert(document.documentElement.scrollLeft + document.documentElement.scrollTop);
}
亲自试一试 »
if (window.pageXOffset !== undefined) { // All browsers, except IE9 and earlier
alert(window.pageXOffset + window.pageYOffset);
} else { // IE9 and earlier
alert(document.documentElement.scrollLeft + document.documentElement.scrollTop);
}
实例
创建一个粘性导航栏:
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var 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.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
亲自试一试 »
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var 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.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
❮ Window 对象
