js获取滚动条的高度

最新推荐文章于 2025-06-16 18:41:56 发布

转载最新推荐文章于 2025-06-16 18:41:56 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/637592

文章标签：

#前端 #ViewUI

　浏览器获取滚动条高度的方法

浏览器	API
IE6/7/8	`document.documentElement.scrollTop`
IE9及以上	`window.pageYOffset` 或者 `document.documentElement.scrollTop`
Safari	`window.pageYOffset`或者`document.body.scrollTop`
Firefox	`window.pageYOffset` 或者 `document.documentElement.scrollTop`
Chrome	`document.documentElement.scrollTop`

备注

很多技术博客上面说Chrome只能使用document.body.scrollTop来获取滚动条的高度。
但是我在测试的时候发现，Chrome不能使用document.body.scrollTop，只能使用document.documentElement.scrollTop来获取滚动条的高度。
如果使用document.body.scrollTop，那么所获得的数值始终是0。
不过大家不用国语在意这一点，我们直接封装一个函数来获取滚动条的高度即可。

　封装获取滚动条高度的函数

function getScrollTop() {
    var scroll_top = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scroll_top = document.documentElement.scrollTop;
    }
    else if (document.body) {
        scroll_top = document.body.scrollTop;
    }
    return scroll_top;
}