tips：實現的原理是通過獲取①獲取滾動條當前的位置②獲取當前可視範圍的高度 ③獲取文件完整的高度 （一）獲取滾動條當前的位置

//獲取滾動條當前的位置
function getScrollTop() {
    var scrollTop = 0;
    if(document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if(document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}
 

二）獲取當前可視範圍的高度

//獲取當前可視範圍的高度  
function getClientHeight() {
    var clientHeight = 0;
    if(document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
}
 

tips：Math.min是兩個值取最小的值，Math.max則相反。 （三）獲取文件完整的高度

//獲取文件完整的高度 
function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

（四）實現下拉重新整理

//滾動事件觸發
window.onscroll = function() {
    if(getScrollTop() + getClientHeight() == getScrollHeight()) {
        console.log('下拉重新整理了')
        //此處發起AJAX請求
    }
}


 

tips：如果想距離底部50px就執行重新整理，請將if條件改為getScrollTop() + getClientHeight()+50> getScrollHeight()即可實現。 五）獲取頁面元素的位置

var wrapTop =document.getElementById('scrollWrap')
console.log(wrapTop.scrollTop + " " + "滾動條當前的位置")
console.log(wrapTop.scrollHeight + " " + "獲取滾動條的高度")

感謝分享https://blog.csdn.net/qq_38209578/article/details/79163103