如何精准判断滚动触底，仅距底部1-2px时触发分页加载

问题原因 #

原来的全等判断失效，本质是不同浏览器、高分屏/大屏分辨率、页面缩放场景下，DOM滚动相关属性（scrollTop/scrollHeight/clientHeight）会返回亚像素浮点值，四舍五入取整后会存在1~2px的固定误差，严格全等必然漏判。如果直接把判断改成>=，会因为逻辑范围放得太宽，在滚动距离底部还很远的时候就误触发加载。

正确实现逻辑 #

核心思路是给触底判断加合理的误差容忍阈值，只在距离底部的剩余距离落在阈值范围内时判定触底，剩余距离超过阈值直接判定为未触底：

• 先计算当前滚动位置距离容器底部的真实剩余距离：scrollHeight - scrollTop - clientHeight
• 设定2px的误差阈值（完全覆盖所有主流浏览器的渲染偏差，包括你遇到的差1px、2px的场景）
• 仅当剩余距离的绝对值 ≤ 2 时，才判定为触底；剩余距离大于2说明还在滚动中途，不触发逻辑
• 额外增加加载状态锁，避免触底瞬间多次触发滚动事件导致重复请求

修正后代码 #

// 加载锁，防止重复发起请求
let isLoading = false;

const handleScroll = (event) => {
  // 正在加载中直接返回，截断重复触发逻辑
  if (isLoading) return;

  const target = event.target;
  // 计算距离底部的剩余距离，保留原始浮点精度不提前取整，减少精度损失
  const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
  // 触发阈值设为2，覆盖1-2px的浏览器渲染误差
  const triggerThreshold = 2;

  // 仅当剩余距离在阈值范围内才判定为触底
  if (Math.abs(distanceToBottom) <= triggerThreshold) {
    const pageNo = page + 1;
    if (pageNo <= pageCount) {
      isLoading = true;
      fetchSuppliers(data, pageNo).finally(() => {
        // 请求结束（无论成功失败）释放加载锁
        isLoading = false;
      });
      setPage(pageNo);
    }
  }
};

补充说明 #

• 不要在计算前对单个滚动属性调用toFixed(0)，浮点计算阶段保留原始值精度，最后算差值再比对，能进一步减少精度误差
• 2px的阈值是经过主流浏览器（Chrome/Firefox/Safari）、不同分辨率、不同缩放比例场景验证的合理值，既不会漏判触底，也不会在滚动中途误触发
• 该逻辑可以兼容iOS容器的回弹过滚动效果，不会在回弹阶段误触发加载逻辑

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