站长网(Downzz.com)
站长网(Downzz.com)
当前位置:首页 > 站长教程 > 建站经验 > JS教程
window.pageXOffset和window.pageYOffset属性介绍
时间:2019-01-09 01:07:38 围观:649 来源:原创

本章节将结合图片介绍一下标题中两个属性的作用,希望能够给需要的朋友带来帮助。

建议在阅读本文章之前事先参阅设备像素和css像素像素简单介绍一章节。

下面将结合图示和代码实例介绍一下标题中两个属性的作用。

一.基本概念:

window.pageXOffset和window.pageYOffset属性可以分别返回文档在水平和垂直方向的滚动距离。

它们返回的是css像素。

这种概念一般很难用语言来解释,下面会有图片展示效果。

二.浏览器兼容:

IE9和IE9以上浏览器支持此属性。

谷歌浏览器支持此属性。

火狐浏览器支持此属性。

Opera浏览器支持此属性。

三.图示如下:


上面的图片演示了window.pageYOffset属性的作用,对于水平方向也是同样的道理。

四.当页面缩放的情况:

理论上,如果用户向上滚动,然后放大,window.pageX/YOffset将会发生变化。但是,浏览器为了想保持web页面的连贯,会在用户缩放的时候保持相同的元素位于可见页面的顶部。这个机制并不能一直很完美的执行,但是它意味着在实际情况下window.pageX/YOffset并没有真正的更改:被滚动出窗口的CSS像素的数量仍然(大概)是相同的。


上面的图片是放大后的,位置保持还是和上面没有缩放是一致的。

五.代码实例:

<!DOCTYPE                 
文章为作者独立观点不代表本网立场,未经允许不得转载。