js 移动端滚动加载更多

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

window.addEventListener('scroll', debounce(() => {
    if (isAtBottom()) {
        loadMoreContent();
    }
}, 200));

let scrollPosition = 0;

function loadMoreContent() {
    scrollPosition = window.scrollY;
    // 加载内容的逻辑...
    window.scrollTo(0, scrollPosition);
}

function isAtBottom() {
    return window.innerHeight + window.scrollY >= document.body.offsetHeight - 50; // 50px 的缓冲区
}

<div id="content">
    <!-- 初始内容 -->
</div>

<script>
let loading = false;
const contentDiv = document.getElementById('content');

function loadMoreContent() {
    if (loading) return;
    loading = true;
    // 模拟异步加载数据
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            const newItem = document.createElement('div');
            newItem.textContent = 'New Item';
            contentDiv.appendChild(newItem);
        }
        loading = false;
    }, 1000);
}

window.addEventListener('scroll', debounce(() => {
    if (isAtBottom()) {
        loadMoreContent();
    }
}, 200));

function isAtBottom() {
    return window.innerHeight + window.scrollY >= document.body.offsetHeight - 50;
}
</script>