window.pageXOffset /pageYOffset 和 scrollLeft、scrollTop 返回当前页面相对于窗口显示区左上角的坐标位置

时间:2024-03-13 15:58:15

用法:

返回网页视区左上角的起始点相对于浏览器的X,Y位置

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

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

window.pageXOffset /pageYOffset 和 scrollLeft、scrollTop 返回当前页面相对于窗口显示区左上角的坐标位置

语法:

window.pageXOffset
window.pageYOffset
  • pageXOffset pageYOffset 属性相等于 scrollX scrollY 属性。

注意:

  • 为了跨浏览器兼容,请使用 window.pageYOffset 代替 window.scrollY 
  • IE 8 及 更早 IE 版本两个属性都不支持,但可以使用 document.documentElement.scrollLeftdocument.documentElement.scrollTop 属性 。

最高兼容性写法:(代码解析)

\\判断是否支持 PageOffset (给 supportPageOffset赋值 true 或 false)
var supportPageOffset = window.pageXOffset !== undefined;

\\检测浏览器渲染属性是否标准模式 (isCSS1Compat赋值 true 或 false)
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

\\如果不支持PageOffset,则要使用 scrollLeft; 
    \\scrollLeft 根据浏览器模式(标准模式、怪异模式),使用不同语法
        \\标准模式: document.documentElement 语法
        \\怪异模式: document.body 语法
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

完整代码:

var supportPageOffset = window.pageXOffset !== undefined;

var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;