原生JS实现下拉加载

实现的原理：滚动条当前的位置+当前可视范围的高度=文档完整的高度
1、获取滚动条当前位置

// 获取滚动条当前的位置
function getScrollTop() {
    let  scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    return scrollTop
}

2、获取当前可视范围的高度

// 获取当前可视范围的高度
function getClientHeight() {
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    return clientHeight;
}

3、获取文档完整的高度

// 获取文档完整的高度
function getScrollHeight() {
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    return scrollHeight
}

4、实现下拉加载

// 添加事件触发
window.onscroll = function () {
    if(getScrollTop() + getClientHeight() === getScrollHeight()){
        console.log('上拉加载了')
        // 发起ajax请求
    }
}

距离底部50px就执行上拉加载

window.onscroll = function () {
    if(getScrollTop() + getClientHeight() + 50 === getScrollHeight()){
        console.log('上拉加载了')
        // 发起ajax请求
    }else if(getScrollTop() === 0 || getScrollTop() < 0){
        console.log('下拉刷新了')
    }
}