获取网页滚动的高度

自己平时写代码没有注意到这些，但是在看别人源码的时候，发现一段注释：pageYOffset has better support than scrollTop，于是突然来了兴趣，也搜索尝试一番，如下是自己的总结。

有四种方式来获取网页向上滚动的距离：

• window.scrollY
• window.pageYOffset
• document.body.scrollTop
• document.documentElement.scrollTop

scrollY与pageYOffset的兼容性

window.scrollY返回文档在垂直方向上滚动的像素值。pageYOffset是scrollY属性的别名。两者是完全相等的：

window.scrollY === window.pageYOffset;
// true
window.scrollX === window.pageXOffset;
// true

在所有的浏览器中都有实现pageX/YOffset属性，但scrollX/Y不一定，所以，为了更好的兼容性，请用pageX/YOffset替代scrollX/Y。

在IE9以下IE浏览器中，scrollY, scrollX, pageYOffset与pageXOffset都不支持。

body.scrollTop与documentElement.scrollTop兼容性

在IE9以下的浏览器中，需要使用document.body.scrollTop与document.documentElement.scrollTop来替代。

但是这两者依然存在兼容性问题：

标准模式下（标准dtd声明）：支持documentElement.scrollTop，而body.scrollTop为0（但是在safari下是反过来的）。

怪异模式下（非标准dtd或没有写）：支持body.scrollTop，但documentElement.scrollTop值为0（这点safari表现一致）。

我们知道，在IE中，标准模式与怪异模式两者的盒模型是不一致的，标准模式下，盒模型和其他浏览器一致，但在怪异模式下大不相同，那么，如何判断当前是标准模式还是怪异模式呢？

var isCSS1Compat = document.compatMode == "CSS1Compat";
var y = isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

补充一点：compatMode指兼容模式，有两个取值，一个是CSS1Compat，表示标准兼容模式开启（标准模式），另一个是BackCompat，表示标准兼容模式关闭（怪异模式）。

兼容写法

所以为了兼容所有浏览器，需要用到如下简单兼容写法：

var x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

或者，采用MDN的兼容写法：

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;

参考文档

• Window.scrollY
• javascript window scrollX, scrollY