实现页面滚动到底部自动点击加载更多产品按钮的JS方案

核心逻辑 #

要触发目标<span>元素的点击，直接获取元素后调用原生click()方法即可，结合你已有的滚动监听函数，完整逻辑如下：

代码实现 #

// 滚动监听处理函数（整合你的现有逻辑）
function handleScroll() {
  // 计算滚动位置是否接近页面底部（这里设置距离底部100px时触发）
  const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  const viewportHeight = window.innerHeight;
  const totalPageHeight = document.documentElement.scrollHeight;

  // 到达触发条件时执行点击
  if (scrollPosition + viewportHeight >= totalPageHeight - 100) {
    // 获取加载按钮元素
    const loadMoreBtn = document.querySelector('.load-products');
    // 避免重复触发：检查按钮存在且未被隐藏
    if (loadMoreBtn && loadMoreBtn.offsetParent !== null) {
      loadMoreBtn.click();
    }
  }
}

// 绑定滚动事件（如果还未绑定）
window.addEventListener('scroll', handleScroll);

注意事项 #

• 可根据需求调整触发阈值（代码中的100是距离底部的像素值，数值越小越接近底部才触发）
• 确保加载按钮在请求过程中会被隐藏或添加禁用状态，防止重复发起请求
• 若页面存在动态渲染内容，每次滚动时重新获取元素的方式可保证能拿到最新的按钮实例

内容的提问来源于stack exchange，提问作者Jiří Liška