JavaScript获取文档在窗口滚动的距离|Window pageXOffset 和 pageYOffset 属性

由 hcduguo

Window 对象参考手册

定义与用法

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。

语法格式

window.pageXOffset

window.pageYOffset

浏览器支持

示例代码

垂直和水平滚动 100 个像素的内容，并弹出 pageXOffset 和 pageYOffset：

window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);

亲自试试

属性Google ChromeInternet ExplorerFirefoxSafariOpera
pageXOffset
pageYOffset		Yes9.0YesYesYes
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。

提示： IE 8 及 更早 IE 版本不支持该属性,但可以使用document.documentElement.scrollLeft 和document.documentElement.scrollTop 属性 。

更多示例

兼容方案 (在 IE8 其更早版本中使用 scrollLeft 和 scrollTop):

window.scrollBy(100, 100);
 
    if (window.pageXOffset !== undefined) {  // 所有浏览器，除了 IE9 及更早版本
        alert("水平滚动: " + window.pageXOffset 
        + ", 垂直滚动: " + window.pageYOffset);
    } else {   // IE9 及更早版本
        alert("水平滚动: " + document.documentElement.scrollLeft 
        + ", 垂直滚动: " + document.documentElement.scrollTop);
    }

亲自试试

Window 对象参考手册

相关