window属性:scrollX

2018-07-07 13:50 更新

scrollX属性

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

scrollX属性语法

var x = window.scrollX;

scrollX属性值

实际上,scrollX属性返回值是一个双精度浮点值,表示文档当前从原点水平滚动的像素数,其中正值表示内容向左滚动。如果文档在子像素精确设备上呈现,则返回的值也是亚像素精确的并且可以包含小数部分。如果文档未向左或向右滚动,则scrollX为0。

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

在更多技术术语中,scrollX返回当前视口左边缘的X坐标。如果没有视口,则返回值为0。

scrollX属性示例

此示例检查文档的当前水平滚动位置。如果它大于400像素,则窗口将滚动回到开头。

if (window.scrollX > 400) {
  window.scroll(0,0);
}

笔记

该pageXOffset属性是该scrollX属性的别名:

window.pageXOffset == window.scrollX; // always true

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

var x = (window.pageXOffset !== undefined)
  ? window.pageXOffset
  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;

var y = (window.pageYOffset !== undefined)
  ? window.pageYOffset
  : (document.documentElement || document.body.parentNode || document.body).scrollTop;

规范

规范 状态 注释
CSS对象模型(CSSOM)视图模块
该规范中“window.scrollX”的定义。
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

公众号
微信公众号

编程狮公众号