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属性的值将与相应的值一起显示。

规范

浏览器兼容性