srcollTop、clientHeight、scrollHeight详解_document.body.scrollheight srcolltop 这是啥-CSDN博客

本文详细介绍了JavaScript中用于页面滚动的三个重要属性：scrollTop（滚动条滚动的距离），scrollHeight（文档实际高度）和clientHeight（窗口可视区域高度）。当clientHeight加上scrollTop大于等于scrollHeight时，表示已到达内容底部，适合加载更多内容。同时，文章提供了jQuery中对应属性的获取方式，并附带了一张清晰的图示解释三者关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js：

scrollTop  ——   滚动条滚动的距离（注意：不是滚动条距顶端的距离）
scrollHeight —— 文档内容的实际高度，包含超出视图溢出的部分 
clientHeight ——  窗口可视范围的高度

当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。

scrollTop：

可以通过 window.pageYOffset 或 document.documentElement.scrollTop 来获取

scrollHeight：

可以通过 document.documentELement.scrollHeight 或 document.bodyscrollHeight

clientHeight:

可以通过 window.innerHeight 或 document.documentElement.clientHeight 来获取

下边这张图很清晰的说明了三者的表现：

补充

与之对应的jQuery中三者的表达方式：

<script>
    $(window).on("resize scroll",function() {
        var windowHeight = $(window).height();//当前窗口的高度             
        var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离            
        var docHeight = $(document).height(); //当前文档的高度 
        console.log(scrollTop, windowHeight, docHeight);
        // 触底公式：（滚动条滚动的高度 + 可视窗口的高度 = 文档的高度）  这个是基本的公式  
        if (scrollTop + windowHeight >= docHeight) { 
            console.log("===加载更多数据===");
        }
    });
</script>

$(document).height();  ==  document.documentElement.scrollHeight;    // 文档内容的实际高度
$(window).scrollTop(); == document.documentElement.scrollTop;        // 滚动条滚动高度
$(window).height(); == document.documentElement.clientHeight;        // 可视窗口高度