window属性:pageYOffset

pageYOffset属性

Window的只读属性pageYOffset是scrollY的一个别名,因此,它会返回文档当前沿垂直轴(即向上或向下)滚动的像素数,其值为0.0,表示该Document的顶部边缘当前与窗口内容区域的顶部边缘对齐。 

对 pageYOffset 的支持比对旧浏览器中的scrollY稍好一些,但如果您不关心浏览器的问题,则可以使用其中一种。

相应的pageXOffset属性返回沿水平轴(左和右)滚动的像素数,是scrollX的别名。

pageYOffset属性语法

yOffset = window.pageYOffset;

pageYOffset属性值

一个浮点数,用于指定Document在其包含Window中垂直滚动的像素数。这个数字是亚像素精确的,所以它可能不是一个整数。值为0.0表示窗口不是垂直滚动的,并且文档的顶部位于窗口内容区域的顶部边缘。

由于此属性是别名Window.scrollY,请参阅该文章以获取有关此值及其用法的更多详细信息。

pageYOffset属性示例

在此示例中,创建<iframe>并填充它的内容,然后将文档中的特定元素滚动到框架中的视图中。一旦完成,通过查看框架contentWindow中的pageYOffset值来检查垂直滚动位置。

HTML

HTML非常简单,只有两个元素:一个<iframe>包含我们要滚动的文档,一个<div>我们将pageYOffset在完成滚动时输出值。

<iframe id="frame">
</iframe>

<div id="info">
</div>

JavaScript

var frame = document.getElementById("frame");
var frameDoc = frame.contentDocument;
var info = document.getElementById("info");

var target = frameDoc.getElementById("overview");
frameDoc.scrollingElement.scrollTop = target.offsetTop;

info.innerText = "Y offset after scrolling: " +
                 frame.contentWindow.pageYOffset + " pixels";

JavaScript代码首先进入frame,并info一个包含内容的<iframe>元素以及我们将输出我们的滚动位置检查的结果的<div>元素。然后它获得对我们想要滚动到框架HTMLIFrameElement.contentDocument上的视图调用getElementById()的元素的引用。

随着在手的目标元素,我们将框架scrollingElement的scrollTop设置为目标元素的offsetTop。通过这样做,我们设置了框架文档的垂直滚动位置,以便它与目标元素的顶部边缘相同。

如果尝试滚动超过最大值,这将自动将滚动位置设置为最大可能值。这可以防止我们脱离文档的边缘。

结果

请注意,在该示例的结果中,该框架的内容将被滚动以显示名为“Overview”的部分,并且该pageYOffset属性的值将与相应的值一起显示。

规范

规范 状态 注释
CSS对象模型(CSSOM)视图模块
该规范中'window.pageYOffset'的定义。
Working Draft
 

浏览器兼容性

电脑端 移动端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Edge Mobile Firefox for Android
Opera for Android
iOS Safari
基本支持 支持 支持 支持 支持:9 支持 支持 支持 支持 支持
以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部