JavaScript 实现页面滚动到底部自动点击“加载更多”功能

function isScrolledToBottom(threshold = 100) {
    // 考虑兼容性，使用 document.documentElement.scrollTop 或 window.scrollY
    const scrollTop = document.documentElement.scrollTop || window.scrollY;
    // 考虑兼容性，使用 document.documentElement.scrollHeight 或 document.body.scrollHeight
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    // 当滚动条位置 + 视口高度 >= 整个文档高度减去阈值时，认为已接近底部
    return (scrollTop + window.innerHeight >= scrollHeight - threshold);
}

// 示例：监听滚动事件
window.addEventListener('scroll', () => {
    if (isScrolledToBottom()) {
        console.log('已滚动到底部附近！');
        // 在这里调用点击按钮的函数
    }
});

function clickLoadMoreButton() {
    // 根据实际页面的元素类名或ID进行选择
    // 示例中，我们尝试查找 '.load-products' 或 '.pagination-loader'
    const loadMoreButton = document.querySelector('.load-products') || document.querySelector('.pagination-loader');

    if (loadMoreButton) {
        // 可以在此处添加额外的检查，例如按钮是否可见或未被禁用
        // if (loadMoreButton.offsetParent !== null && !loadMoreButton.disabled) {
        loadMoreButton.click();
        console.log('“加载更多”按钮已点击！');
        return true; // 表示点击成功
        // }
    } else {
        console.warn('未找到“加载更多”按钮。');
        return false; // 表示未找到按钮
    }
}

let isLoading = false; // 标志位，防止重复加载

/**
 * 判断是否滚动到页面底部附近
 * @param {number} threshold 距离底部多少像素时触发
 * @returns {boolean} 是否滚动到页面底部附近
 */
function isScrolledToBottom(threshold = 100) {
    const scrollTop = document.documentElement.scrollTop || window.scrollY;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    return (scrollTop + window.innerHeight >= scrollHeight - threshold);
}

/**
 * 查找并点击“加载更多”按钮
 * @returns {boolean} 是否成功触发点击
 */
function clickLoadMoreButton() {
    // 尝试查找常见的“加载更多”按钮选择器
    const loadMoreButton = document.querySelector('.load-products') || document.querySelector('.pagination-loader');

    // 确保按钮存在且当前不在加载中
    if (loadMoreButton && !isLoading) {
        // 进一步检查按钮是否可见和可用（可选但推荐）
        // 例如：if (loadMoreButton.offsetParent !== null && !loadMoreButton.disabled) {
        isLoading = true; // 设置加载中状态
        loadMoreButton.click();
        console.log('“加载更多”按钮已点击！开始加载新内容...');

        // 模拟异步加载完成后的状态重置
        // 实际项目中，此部分应在数据加载成功回调中执行
        setTimeout(() => {
            isLoading = false; // 重置加载状态
            console.log('内容加载完成，可以再次触发。');
            // 如果加载后页面高度发生变化，可能需要再次检查是否已到底部
            if (isScrolledToBottom()) {
                // 如果加载后仍然在底部，且有更多内容，可以再次尝试点击
                // 但需要注意避免无限循环，通常由后端判断是否还有更多数据
            }
        }, 2000); // 假设加载需要2秒
        return true;
    } else if (isLoading) {
        console.log('内容正在加载中，请稍候。');
    } else {
        console.warn('未找到“加载更多”按钮或按钮不可用。');
    }
    return false;
}

/**
 * 节流函数：限制函数在一定时间内只能执行一次
 * @param {Function} func 要节流的函数
 * @param {number} delay 延迟时间（毫秒）
 * @returns {Function} 节流后的函数
 */
function throttle(func, delay) {
    let timeoutId = null;
    let lastArgs = null;
    let lastThis = null;

    return function(...args) {
        lastArgs = args;
        lastThis = this;

        if (!timeoutId) {
            timeoutId = setTimeout(() => {
                func.apply(lastThis, lastArgs);
                timeoutId = null;
                lastArgs = null;
                lastThis = null;
            }, delay);
        }
    };
}

// 监听滚动事件，并使用节流优化，每200毫秒最多执行一次滚动处理
window.addEventListener('scroll', throttle(() => {
    if (isScrolledToBottom()) {
        clickLoadMoreButton();
    }
}, 200));