window屬性:scrollY

2018-07-09 14:19 更新

scrollY屬性

Window接口的只讀scrollY屬性返回文檔當(dāng)前垂直滾動(dòng)的像素?cái)?shù)。這個(gè)值在現(xiàn)代瀏覽器中是亞像素精確的,這意味著它不一定是整數(shù)。您可以從scrollX屬性中獲取文檔水平滾動(dòng)的像素?cái)?shù)。

scrollY屬性語(yǔ)法

var y = window.scrollY

scrollY屬性值

實(shí)際上,返回值是一個(gè)雙精度浮點(diǎn)值,表示文檔當(dāng)前從原點(diǎn)垂直滾動(dòng)的像素?cái)?shù),其中正值表示內(nèi)容向上滾動(dòng)。如果文檔在亞像素精確設(shè)備上呈現(xiàn),則返回的值也是亞像素精確的,并且可以包含小數(shù)部分。如果文檔沒(méi)有向上或向下滾動(dòng),則scrollY為0。

如果需要整數(shù)值,可以使用Math.round()來(lái)四舍五入它。

在更多技術(shù)術(shù)語(yǔ)中,scrollY返回當(dāng)前視口頂邊的Y坐標(biāo)。如果沒(méi)有視口,則返回值為0。

scrollY屬性示例

// make sure and go down to the second page 
if (window.scrollY) {
  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);

筆記

使用此scrollY屬性來(lái)檢查使用相對(duì)滾動(dòng)函數(shù)(例如,scrollBy(),scrollByLines()或scrollByPages())時(shí)文檔是否已滾動(dòng)。

該pageYOffset屬性是該scrollY屬性的別名:

window.pageYOffset == window.scrollY; // always true

對(duì)于跨瀏覽器兼容性,請(qǐng)使用window.pageYOffset而不是window.scrollY。此外,舊版本的Internet Explorer(<9)不支持任何屬性,必須通過(guò)檢查其他非標(biāo)準(zhǔn)屬性來(lái)解決。一個(gè)完全兼容的例子:

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

規(guī)范

規(guī)范 狀態(tài) 注釋
CSS對(duì)象模型(CSSOM)視圖模塊
該規(guī)范中“window.scrollY”的定義。
Working Draft
 

瀏覽器兼容性

電腦端 移動(dòng)端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview Chrome for Android
Edge Mobile Firefox for Android
Opera for Android
iOS Safari
基本支持 支持 支持 支持 不支持 支持 支持 支持 支持 支持 支持 ? ?
亞像素精度 支持 支持 支持:55 不支持 支持 支持 支持 支持 支持 支持:55 ? ?
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)