window屬性：pageYOffset

pageYOffset屬性

Window的只讀屬性pageYOffset是scrollY的一個別名，因此，它會返回文檔當(dāng)前沿垂直軸（即向上或向下）滾動的像素數(shù)，其值為0.0，表示該Document的頂部邊緣當(dāng)前與窗口內(nèi)容區(qū)域的頂部邊緣對齊。 

對 pageYOffset 的支持比對舊瀏覽器中的scrollY稍好一些，但如果您不關(guān)心瀏覽器的問題，則可以使用其中一種。

相應(yīng)的pageXOffset屬性返回沿水平軸（左和右）滾動的像素數(shù)，是scrollX的別名。

pageYOffset屬性語法

yOffset = window.pageYOffset;

pageYOffset屬性值

一個浮點數(shù)，用于指定Document在其包含Window中垂直滾動的像素數(shù)。這個數(shù)字是亞像素精確的，所以它可能不是一個整數(shù)。值為0.0表示窗口不是垂直滾動的，并且文檔的頂部位于窗口內(nèi)容區(qū)域的頂部邊緣。

由于此屬性是別名Window.scrollY，請參閱該文章以獲取有關(guān)此值及其用法的更多詳細(xì)信息。

pageYOffset屬性示例

在此示例中，創(chuàng)建<iframe>并填充它的內(nèi)容，然后將文檔中的特定元素滾動到框架中的視圖中。一旦完成，通過查看框架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代碼首先進(jìn)入frame，并info一個包含內(nèi)容的<iframe>元素以及我們將輸出我們的滾動位置檢查的結(jié)果的<div>元素。然后它獲得對我們想要滾動到框架HTMLIFrameElement.contentDocument上的視圖調(diào)用getElementById()的元素的引用。

隨著在手的目標(biāo)元素，我們將框架scrollingElement的scrollTop設(shè)置為目標(biāo)元素的offsetTop。通過這樣做，我們設(shè)置了框架文檔的垂直滾動位置，以便它與目標(biāo)元素的頂部邊緣相同。

如果嘗試滾動超過最大值，這將自動將滾動位置設(shè)置為最大可能值。這可以防止我們脫離文檔的邊緣。

結(jié)果

請注意，在該示例的結(jié)果中，該框架的內(nèi)容將被滾動以顯示名為“Overview”的部分，并且該pageYOffset屬性的值將與相應(yīng)的值一起顯示。

規(guī)范

瀏覽器兼容性