如何检测React下拉列表滚动是否接近底部以触发加载下一批数据

你当前使用的offsetHeight - scrollTop < 50判断逻辑存在错误，无法准确识别滚动到接近底部的时机，正确的判断条件如下：

核心判断逻辑 #

三个DOM属性的含义：

• scrollTop：滚动容器顶部被隐藏的内容高度
• offsetHeight：滚动容器可视区域的高度
• scrollHeight：滚动容器内所有内容的总高度
  当滚动到距离底部还有指定阈值（比如50px）时，满足公式：
  scrollTop + offsetHeight >= scrollHeight - 触发阈值

修正后的代码示例 #

// 建议额外添加isLoading状态锁，避免重复请求
const [isLoading, setIsLoading] = useState(false);

function handleOnScroll(e) {
  const { scrollTop, scrollHeight, offsetHeight } = e.target;
  const triggerDistance = 50; // 距离底部50px时触发加载，可自行调整
  // 没有加载中、且满足滚动条件才触发请求
  if (!isLoading && scrollTop + offsetHeight >= scrollHeight - triggerDistance) {
    handleLoadNextElements();
  }
}

async function handleLoadNextElements() {
  setIsLoading(true);
  try {
    // 调用后端接口请求下一页数据的逻辑
    await fetchNextPageData();
  } finally {
    setIsLoading(false);
  }
}

额外优化建议 #

• 防抖处理：滚动事件触发频率极高，可以给handleOnScroll添加100~200ms的防抖，减少不必要的逻辑执行
• 全量加载判断：如果后端已经返回没有更多数据，可直接跳过滚动判断逻辑，避免无意义的计算
• 边界兼容：部分浏览器存在滚动值小数精度问题，可以给判断条件加1px的容错，比如scrollTop + offsetHeight + 1 >= scrollHeight - triggerDistance

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