首页 > web前端 > js如何获取滚动条的高度

js如何获取滚动条的高度

2012年12月7日 发表评论 阅读评论

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

目前主流浏览器除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...Loading...
分类: web前端 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.

无觅相关文章插件,快速提升流量