js获取滚动条的高度

　浏览器获取滚动条高度的方法浏览器APIIE6/7/8document.documentElement.scrollTopIE9及以上window.pageYOffset 或者 document.documentElement.scrollTopSafariwindow.pageYOffset或者document.body.sc...

fengzhen8023

14528人浏览 · 2018-09-10 14:09:45

fengzhen8023 · 2018-09-10 14:09:45 发布

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

浏览器	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;
}