loadMore = (element, callback) => {
    let windowHeight = window.screen.height;
    let height;
    let setTop;
    let paddingBottom;
    let marginBottom;
    let requestFram;
    let oldScrollTop;

    document.body.addEventListener(‘scroll‘,() => {
       loadMore();
    }, false)
    //運動開始時獲取元素 高度 和 offseTop, pading, margin
    element.addEventListener(‘touchstart‘,() => {
        height = element.offsetHeight;
        setTop = element.offsetTop;
        paddingBottom = getStyle(element,‘paddingBottom‘);
        marginBottom = getStyle(element,‘marginBottom‘);
    },{passive: true})

    //運動過程中保持監聽 scrollTop 的值判斷是否到達底部
    element.addEventListener(‘touchmove‘,() => {
       loadMore();
    },{passive: true})

    //運動結束時判斷是否有慣性運動，慣性運動結束判斷是非到達底部
    element.addEventListener(‘touchend‘,() => {
           oldScrollTop = document.body.scrollTop;
           moveEnd();
    },{passive: true})
    
    const moveEnd = () => {
        requestFram = requestAnimationFrame(() => {
            if (document.body.scrollTop != oldScrollTop) {
                oldScrollTop = document.body.scrollTop;
                loadMore();
                moveEnd();
            }else{
                cancelAnimationFrame(requestFram);
                //為了防止鼠標擡起時已經渲染好數據從而導致重獲取數據，應該重新獲取dom高度
                height = element.offsetHeight;
                loadMore();
            }
        })
    }

    const loadMore = () => {
        if (document.body.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom) {
            callback();
        }
    }
}
 

頁面到達底部，加載更多