浏览器滚动条 clientHeight、offsetHeight、scrollTop。

最新推荐文章于 2021-12-19 00:06:49 发布

hljqfl

最新推荐文章于 2021-12-19 00:06:49 发布

阅读量357

点赞数

分类专栏： JS-CSS

本文链接：https://blog.csdn.net/hljqfl/article/details/85677564

版权

JS-CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。

clientHeight：可见高度。

offsetHeight：控件的实际高度。

scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。

举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。

那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。

你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　

所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。

一、如何获得网页整体高度？

利用jQuery获取body高度方法：$(documet).height();

二、如何获得滚动高度？

利用jQuery获取滚动高度方法：$("html,body").scrollTop();

三、如何获得浏览器可见高度？

利用JS获取浏览器可见高度方法：document.documentElement.clientHeight;

首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。

这个区间是： [0, (offsetHeight - clientHeight)]

即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。

1、判断滚动条滚动到最底端： scrollTop == (offsetHeight – clientHeight)

2、在滚动条距离底端50px以内： (offsetHeight – clientHeight) – scrollTop <= 50

3、在滚动条距离底端5%以内： scrollTop / (offsetHeight – clientHeight) >= 0.95

DTD已声明

document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度

document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0

document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度

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未声明

document.documentElement.scrollHeight 浏览器可视部分高度，document.body.scrollHeight 浏览器所有内容高度

document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度

document.documentElement.clientHeight 始终为0，document.body.clientHeight 浏览器可视部分高度

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 浏览器可视部分高度

例子

Java代码

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <script src="jquery.js"></script>  
</head>  
<style>  
  
</style>  
  
<script>  
$(function(){  
    var obj = document.getElementById("test");  
    console.log(obj.offsetHeight);  
    console.log(obj.clientHeight);  
    console.log(obj.scrollTop);  
});  
  
window.onscroll=function(){  
    //alert(1);  
    var obj = document.getElementById("test");  
        //滚动条距离顶部的高度  
        console.log("getScrollTop() : " + getScrollTop());  
        //可视化窗口的高度  
        console.log("getClientHeight() : " + getClientHeight());  
        //内容的高度  
        console.log("getScrollHeight() : " + getScrollHeight());  
        //test();  
    };  
  
/******************** 
* 取窗口滚动条高度  
******************/   
function getScrollTop() {  
    var scrollTop = 0;  
    if (document.documentElement && document.documentElement.scrollTop) {  
        scrollTop = document.documentElement.scrollTop  
    } else {  
        if (document.body) {  
            scrollTop = document.body.scrollTop  
        }  
    }  
    return scrollTop  
}  
  
/******************** 
* 取窗口可视范围的高度  
*******************/  
function getClientHeight() {  
    var clientHeight = 0;  
    if (document.body.clientHeight && document.documentElement.clientHeight) {  
        var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight  
    } else {  
        var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight  
    }  
    return clientHeight  
}  
  
/******************** 
* 取文档内容实际高度  
*******************/  
function getScrollHeight() {  
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)  
}  
  
function test() {  
    if (getScrollTop() + getClientHeight() == getScrollHeight()) {  
        alert("到达底部")  
    } else {  
        alert("没有到达底部")  
    }  
};  
  
</script>  
<body>  
  
<div id="test" style="width:100%;height:3000px;border:1px solid red;">  
    dsafdsaf  
</div>  
      
</body>  
</html>

hljqfl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器滚动条 clientHeight、offsetHeight、scrollTop。

需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。clientHeight：可见高度。 offsetHeight：控件的实际高度。 scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是10...
复制链接

扫一扫