原生js、Jquery下滑到底部加载更多

原生js实现

需要三个高度：scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、scrollTop（滚动条滚动距离）、clientHeight（窗口可视范围高度）。当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。

// Js代码
window.onscroll= function(){
    //文档内容实际高度（包括超出视窗的溢出部分）
    var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
    //滚动条滚动距离
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //窗口可视范围高度
    var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);
    
    if(clientHeight + scrollTop >= scrollHeight){
        console.log("===加载更多内容……===");
    }
}

一般来说，加载几次之后就有问题了，因为 >= scrollHeight不成立。

我们可以设置 >= scrollHeight -200，也就是距离底部还有200px的时候，就触发，不会有这个问题。

Jquery的实现举例

    $(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 - 200) {  // -200px，而不是到底部
            console.log("===加载更多数据===");
        }
    });