原生JavaScript：页面滚动到底部移除类的跨浏览器兼容解决方案

我之前也碰到过Android Chrome里滚动判断偶尔失效的情况，你的原代码思路没问题，但几个细节处理不到位导致了兼容性问题。下面给你一个跨浏览器稳定生效的实现方案，附带问题分析和优化点：

原代码的潜在问题 #

你的代码里有两个容易导致失效的点：

• 高度计算不准确：使用document.body.offsetHeight获取文档高度，在标准DOCTYPE模式下，body的高度可能不等于整个页面的实际滚动高度（比如存在margin、padding或溢出内容时），Android Chrome对这个值的计算和桌面浏览器可能有差异。
• 没有处理像素精度问题：offset >= height的判断太严格，滚动时window.scrollY可能因为浏览器的像素渲染（比如Retina屏的小数像素）或者滚动事件触发时机，导致刚好差1-2像素没达到阈值，从而跳过移除类的逻辑。

优化后的实现代码 #

// 获取根元素（比body更准确）
const rootElement = document.documentElement;

// 节流函数：减少滚动事件触发频率，提升性能
function throttle(func, delay = 100) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 滚动处理核心逻辑
function checkScrollPosition() {
  // 当前滚动位置 + 视口高度 = 已可见区域的底部位置
  const visibleBottom = window.scrollY + window.innerHeight;
  // 文档总高度（包括所有滚动内容，不管是否可见）
  const totalDocumentHeight = rootElement.scrollHeight;
  // 阈值：允许5px的误差，避免像素精度问题
  const threshold = 5;

  // 判断是否滚动到底部（包含阈值范围）
  if (visibleBottom >= totalDocumentHeight - threshold) {
    rootElement.classList.remove('hideOnScroll');
  } else {
    // 如果需要在离开底部时重新添加类，取消下面注释
    // rootElement.classList.add('hideOnScroll');
  }
}

// 绑定滚动事件（用节流优化）
window.addEventListener('scroll', throttle(checkScrollPosition));

// 页面加载完成后立即检查初始状态（比如页面本身就很短的情况）
window.addEventListener('load', checkScrollPosition);

关键优化点说明 #

1. 准确的高度计算：使用document.documentElement.scrollHeight获取文档总高度，这是W3C标准的方式，在所有现代浏览器（包括Android Chrome）中都能准确返回整个页面的滚动高度，不受body样式影响。
2. 阈值容错：设置5px的阈值，避免因为浏览器的像素精度问题导致判断失效，Android Chrome的滚动事件在某些场景下会出现1-2px的差值，这个阈值刚好能覆盖这种情况。
3. 节流优化：滚动事件会频繁触发，节流函数能减少逻辑执行的次数，既提升性能，也避免快速滚动时逻辑执行不及时的问题。
4. 初始状态检查：页面加载完成后立即执行一次判断，如果页面本身就很短（已经滚动到底部），能直接触发移除类的操作。

额外注意事项 #

如果你的页面有动态加载内容（比如下拉加载更多），在新内容加载完成后需要手动调用checkScrollPosition()，因为此时文档总高度已经更新，需要重新判断滚动位置。

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