网络进行时

由于市面上浏览器的种类众多，但是浏览器没有一个通用的方法来获取该值，想做到每个浏览器都兼容还是要下一些功夫的。

目前主流浏览器除IE外对浏览器标准支持都比较好，例如chrome、firefox以及safari等。对应后者，可以通过window对象的pageYOffset属性来取到当前滚动条到页面顶部的高度。对于万恶的IE来说就比较麻烦一点，它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode，页面声明了DOCTYPE时为Standards Mode，反之为Quirks Mode。可以使用document.compatMode来获取，该方法也同时支持其他浏览器，其返回值为BackCompat或CSS1Compat，含义如下：

BackCompat Standards-compliant mode is not switched on. (Quirks Mode) 

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

由于IE对盒模型的渲染跟文档类型有很大关系，所以获取滚动条高度的方式也是不一样的。当文档类型为Standards Mode，获取方式为：document.documentElement.scrollTop，而Quirks Mode时则为：document.body.scrollTop。

理解上面的所提到的差异后，用代码实现就很容易了，具体实现的代码如下：

function getScrollTop1() {
    if ('pageYOffset' in window) {
        return window.pageYOffset;
    } else if (document.compatMode === "BackCompat") {
        return document.body.scrollTop;
    } else {
        return document.documentElement.scrollTop;
    }
}

甚至可以修改上述代码，使用一行代码搞定，但是可读性没有上面好，代码如下：

function getScrollTop() {
    return !('pageYOffset' in window)
                ? (document.compatMode === "BackCompat")
                ? document.body.scrollTop
                : document.documentElement.scrollTop
                : window.pageYOffset;
}
或
function getScrollTop() {
    return ('pageYOffset' in window) ? window.pageYOffset
        : document.compatMode === "BackCompat"
        && document.body.scrollTop
        || document.documentElement.scrollTop ;
}

另外除了上述document.compatMode的方式来获取文档类型外，还可以使用 document.defaultView来获取。在IE 9以下的Quirks Mode中document不支持defaultView属性。参考地址：https://developer.mozilla.org/en-US/docs/DOM/document.defaultView。

(4 人打了份: 平均分：3.00)

Loading...