window屬性:pageYOffset

2018-06-26 11:12 更新

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ī)范

規(guī)范 狀態(tài) 注釋
CSS對象模型(CSSOM)視圖模塊
該規(guī)范中'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 支持 支持 ? 支持 支持 支持 ? ?
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號