srcollTop、clientHeight、scrollHeight详解

原生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;        // 可视窗口高度

最后

以上就是大意导师为你收集整理的srcollTop、clientHeight、scrollHeight详解的全部内容，希望文章能够帮你解决srcollTop、clientHeight、scrollHeight详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。