• 先自己模拟几万条数据先。沙沙碎啦

• DOM元素上，绑定 onScrollCapture 事件，以及 ref

• 靓仔的鼠标滚动 scroll,触发事件，上帝说这是核心

• 滚动加载我都不知道写了多少次了，但是次次写完我都记不住，这次我就记下来吧

实现滚动到底部加载更多

• scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）
• scrollTop（滚动条滚动距离）
• clientHeight（窗口可视范围高度）
• 当 clientHeight + scrollTop >= scrollHeight 时,可以触发更多函数
• body是DOM对象里的body子节点，即 标签；
• documentElement 是整个节点树的根节点root，即 标签；

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("触发函数"); 
    } 
}

JQ的方法，永远经典暴力

$(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("触发函数"); 
    } 
});

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习