window属性:scrollY

2018-07-09 14:19 更新

scrollY属性

Window接口的只读scrollY属性返回文档当前垂直滚动的像素数。这个值在现代浏览器中是亚像素精确的,这意味着它不一定是整数。您可以从scrollX属性中获取文档水平滚动的像素数。

scrollY属性语法

var y = window.scrollY

scrollY属性值

实际上,返回值是一个双精度浮点值,表示文档当前从原点垂直滚动的像素数,其中正值表示内容向上滚动。如果文档在亚像素精确设备上呈现,则返回的值也是亚像素精确的,并且可以包含小数部分。如果文档没有向上或向下滚动,则scrollY为0。

如果需要整数值,可以使用Math.round()来四舍五入它。

在更多技术术语中,scrollY返回当前视口顶边的Y坐标。如果没有视口,则返回值为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属性来检查使用相对滚动函数(例如,scrollBy(),scrollByLines()或scrollByPages())时文档是否已滚动。

该pageYOffset属性是该scrollY属性的别名:

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

对于跨浏览器兼容性,请使用window.pageYOffset而不是window.scrollY。此外,旧版本的Internet Explorer(<9)不支持任何属性,必须通过检查其他非标准属性来解决。一个完全兼容的例子:

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;

规范

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

浏览器兼容性

电脑端 移动端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview Chrome for Android
Edge Mobile Firefox for Android
Opera for Android
iOS Safari
基本支持 支持 支持 支持 不支持 支持 支持 支持 支持 支持 支持
亚像素精度 支持 支持 支持:55 不支持 支持 支持 支持 支持 支持 支持:55
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号