如何使用JavaScript实现滚动到容器底部时触发load()函数事件

你原有代码的注释思路是正确的，只需要修正属性调用和补上判断逻辑即可，修改后的代码如下：

修正后的JS代码 #

function show(){
  const el = document.querySelector('.demo');
  el.addEventListener('scroll',function(){
    // 滚动条垂直滚动距离
    const scrollTop = el.scrollTop;
    // 容器可视区域高度
    const clientHeight = el.clientHeight;
    // 容器内容总高度
    const scrollHeight = el.scrollHeight;
    // 加1是为了兼容不同浏览器的小数像素误差，避免刚好到边界时判断失效
    if(scrollTop + clientHeight + 1 >= scrollHeight){
      load();
    }
  })
}
show();
function load(){
  // 可选优化：加加载状态锁，避免滚动到底部重复触发加载逻辑
  // if(window.isLoading) return
  // window.isLoading = true
  let el = document.querySelector('.load');
  el.style.display = 'block';
  // 实际异步加载数据完成后，可以重置锁和隐藏加载动画
  // setTimeout(()=>{
  //   window.isLoading = false
  //   el.style.display = 'none'
  // },1000)
}

核心逻辑说明 #

• scrollTop：容器顶部被滚动隐藏的像素高度，会随着滚动操作动态变化
• clientHeight：容器的可视区域高度，只要容器尺寸不修改就固定不变
• scrollHeight：容器内部所有内容的总高度，包含滚动隐藏的部分，只要内容不新增就固定不变
  当滚动到最底部时，已经滚动的高度加上可视高度刚好等于总内容高度，此时触发加载逻辑即可。
  小提示：如果测试时没有触发滚动事件，可以先多复制几个<li class="item">元素，保证.demo容器的内容总高度大于300px，撑出滚动条后再测试。

内容的提问来源于stack exchange，提问作者WEI A