页面无限滚动加载原理

首先得理解三个dom元素： clientHeight:表示外围div的高度，即可视高度 offsetHeight／scrollHeight:表示内容的高度 scrollTop：表示滚动条可以滚动的高度

举个例子说明这个几个概念吧 比如有一个div，它的高度是600px，那么clientHeight＝600px;比如这个div 里面的的内容很多，内容的高度为1000px，那么offsetHeight ＝ 1000px,就是说我们只能看到600px的内容，还有400px的内容是看不到的，只能通过滚动条拉动来查看，scrollTop的范围在[0,400]之间，当滚动条＝400px时就是说明滚动条拉到底了。

offsetHeight／scrollHeight的区别 这两者都表示内容的高度，当内容的高度小于clientHeight的高度的时候，scrollHeight ＝ clientHeight，而offsetHeight则是可以小于clientHeight的。

获取scrollTop：

谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器！

//触发条件

function touchScroll() {
    let offsetHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight); // 内容高度
    let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; //视窗高度
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; //滚动条滚动高度

    return (offsetHeight - clientHeight - scrollTop)
}

window.onscroll=function(){
    let touchScroll = this.touchScroll()
    if(touchScroll < 0) {
        // 发送请求加载
        console.log('我到底啦')
    }
};复制代码

转载于:https://juejin.im/post/5ab9dba1f265da238a3076ea