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

这篇博客介绍了window.pageXOffset和pageYOffset属性,用于获取网页视区相对于窗口显示区的坐标位置,以及如何在不同浏览器中实现兼容性,包括使用scrollLeft和scrollTop的替代方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用法:

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

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

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

语法:

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;

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值