IE/FF/Chrome下document.documentElement/body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否到达页面底部。

最新推荐文章于 2017-10-25 14:45:00 发布

转载最新推荐文章于 2017-10-25 14:45:00 发布 · 516 阅读

文章标签：

#scrollTop #scrollHeight #clientHeight #document.

Javascript 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了在不同浏览器中如何获取滚动条的位置信息，并提供了一段JavaScript代码来判断滚动条是否已经滑动到了页面底部。文章针对IE、Firefox和Chrome等浏览器在DTD声明与否的不同情况下，解释了document对象相关属性的具体含义。

DTD已声明：

document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度；
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0；
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度；

Chrome

document.documentElement.scrollHeight 浏览器所有内容高度， document.body.scrollHeight 浏览器所有内容高度；
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度；
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度；

DTD未声明：

IE
document.documentElement.scrollHeight 浏览器可视部分高度，document.body.scrollHeight 浏览器所有内容高度；
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度；
document.documentElement.clientHeight 始终为0，document.body.clientHeight 浏览器可视部分高度；

FF
document.documentElement.scrollHeight 浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度；
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度；
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度；

Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度；
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度；
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度；

注：1.浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和。

2.浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

综上：

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop。
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body。

3.document.compatMode 可以用来判断是否声明了DTD，值为"BackCompat"：未声明，值为"CSS1Compat"：已声明。

所以，判断滚动条是否已拉到页面最底部，可以用如下代码：

<span style="font-size:14px;">window.onscroll  = function (){
    var marginBot = 0;
    if (document.compatMode === "CSS1Compat"){
        marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-  document.documentElement.clientHeight;
    } else {
        marginBot = document.body.scrollHeight - document.body.scrollTop-  document.body.clientHeight;
    }
    if(marginBot<=0) {
        //do something        
    }
}</span>

PS：猿猿们有什么想法，可以留言给我呦！