原生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('下拉刷新了')
    }
}