js web 滚动翻页

function impregnationStockingDemandMainHtml(id) {
    let html = `
        <div style="width: 100%;height: 80vh;background-color: #0f81cc;overflow: auto;" id="zxStockingDemandArea">
            <ul style="width: 100%;height: 100%;" id="zxStockingDemandContent">
                <li style="width: 100%;height: 10vh;">
                    <h1>这是注入页面</h1>
                </li>
            </ul>
        </div>
    `;
    let targetDom = document.getElementById("myTabContentOne");
    targetDom.innerHTML = html;
    targetDom.style.backgroundColor = "#f2f2f2f2";
    document.getElementById("zxStockingDemandArea").onscroll = function() {
        if(getScrollTop() + getClientHeight() == getScrollHeight()) {
            console.log("getScrollTop",getScrollTop());
            console.log("getClientHeight",getClientHeight());
            console.log("getScrollHeight",getScrollHeight());
            console.log('下拉刷新了')
        }
    }
}

// 获取滚动条当前的位置
function getScrollTop() {
    let scrollTop = 0;
    let dom = document.getElementById("zxStockingDemandArea");// ContentArea ID 可以更换
    if(dom && dom.scrollTop) {
        scrollTop = dom.scrollTop;
    }
    return scrollTop;
}

// 获取目标可视范围的高度
function getClientHeight() {
    let clientHeight = 0;
    let dom = document.getElementById("zxStockingDemandArea");// ContentArea ID 可以更换
    if(document.body.clientHeight && dom.clientHeight) {
        clientHeight = dom.clientHeight;
    } else {
        clientHeight = dom.clientHeight;
    }
    return clientHeight;
}

// 获取内容当前高度的高度
function getScrollHeight() {
    let dom = document.getElementById("zxStockingDemandContent"); // ContentDom ID 可以更换
    return dom.scrollHeight;
}