jQuery滚动事件异常求助：页面缩放后失效+移动端无响应

嘿，这两个问题确实是滚动监听里的常见坑，我来帮你逐个捋清楚怎么解决：

问题1：页面缩放后触发失效的原因与修复 #

缩放页面后，浏览器的像素计算会出现浮点偏差——比如你原本用$(window).scrollTop() + $(window).height() === $(document).height()这种严格相等的判断，缩放后数值会变成类似1234.5和1234.6的情况，直接导致条件不成立。

修复思路：

• 放弃严格相等，改用大于等于判断，允许1px以内的误差，抵消缩放带来的浮点偏差
• 或者用Math.floor()把所有数值取整后再比较，避免小数干扰

问题2：移动设备上不工作的原因与适配 #

移动端浏览器的scroll事件有几个特殊点：

1. 部分浏览器会把scrollTop挂载在body上，而桌面端通常在documentElement
2. 移动端普遍有回弹滚动（overscroll）效果，会导致scrollTop出现负数或超出文档高度的情况
3. 部分移动端浏览器的scroll事件触发频率更低，甚至需要配合touchmove事件辅助监听

适配思路：

• 统一获取正确的滚动容器高度和滚动位置，兼容不同浏览器的滚动根元素
• 增加对touchmove事件的监听，提升移动端触发灵敏度
• 放宽触发条件的阈值，适配回弹滚动的特殊情况

完整修复后的代码示例 #

// 封装滚动到底部的判断逻辑，避免重复计算
function isScrollToBottom() {
    // 兼容不同浏览器的滚动根元素
    const scrollRoot = document.documentElement || document.body;
    // 获取滚动位置、视口高度、文档总高度
    const scrollTop = scrollRoot.scrollTop;
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    const documentHeight = scrollRoot.scrollHeight;
    
    // 允许1px的误差，兼容缩放和移动端回弹
    return scrollTop + viewportHeight >= documentHeight - 1;
}

$(window).on("resize scroll touchmove", function() {
    // 防抖处理（可选，避免频繁触发消耗性能）
    clearTimeout(this.scrollTimer);
    this.scrollTimer = setTimeout(function() {
        if (isScrollToBottom()) {
            // 这里写你要触发的业务逻辑
            console.log("已滚动到页面底部！");
        }
    }, 100);
});

额外优化小技巧 #

• passive事件监听：如果你的jQuery版本支持，可以给scroll和touchmove事件加{ passive: true }，大幅提升移动端滚动流畅度：

  $(window).on("resize scroll touchmove", { passive: true }, function() {
      // 逻辑同上
  });
  

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