jQuery无限滚动在移动端失效问题求助

看起来你的无限滚动在桌面端正常运转，但到了移动端就罢工了——这种情况大多是滚动位置的精度判断或者移动端滚动事件的特性导致的，我帮你拆解问题并给出可落地的修复方案：

核心问题分析 #

你的代码里用了严格相等的判断逻辑：

$container.scrollTop() === $container.prop('scrollHeight') - $container.height()

在桌面端，滚动行为相对规整，scrollTop刚好能精确触达scrollHeight - height的数值；但在移动端，有几个隐形的坑：

• 浏览器的**弹性滚动（回弹效果）**会导致scrollTop出现小数，或者滚动时不会刚好停在精确的底部位置
• 移动端滚动事件的触发频率比桌面端低，严格相等的条件很容易错过触发时机
• 部分移动端浏览器对scrollHeight的计算存在微小偏差，导致精确匹配永远不成立

具体修复步骤 #

1. 替换严格相等为阈值判断 #

把精确匹配改成允许一定的误差范围，比如当滚动距离离底部还有50px以内时就触发加载，这样容错性会高很多：

var page = 2; 
var enableScroll = true; 
var $container = $('.main-panel'); 

$container.scroll(function(e) {
  if (enableScroll === true) {
    // 计算当前滚动位置离底部的剩余距离
    const distanceToBottom = $container.prop('scrollHeight') - $container.height() - $container.scrollTop();
    // 当距离底部小于等于50px时触发加载（阈值可根据需求调整）
    if (distanceToBottom <= 50) {
      enableScroll = false; // 先禁用，避免重复发送请求
      $.get("/usuario/conversacion/mensajes-next/?pagina=" + page + "&con=" + $("#id_conversacion").val())
        .done(function(data){
          if(data == ''){
            enableScroll = false; // 没有更多数据，永久禁用
          }else{
            $('.timeline li:last').after(data);
            page += 1;
            enableScroll = true; // 加载完成后重新启用
          }
        })
        .fail(function() {
          enableScroll = true; // 请求失败也要重新启用，避免滚动加载彻底卡死
        });
    }
  }
});

2. 优化滚动事件监听（可选） #

移动端的滚动事件如果绑定不当，可能会被浏览器的默认行为阻塞，建议添加passive选项提升性能（jQuery 3.0及以上版本支持）：

$container.on('scroll', { passive: true }, function(e) {
  // 原滚动逻辑...
});

3. 检查容器的CSS设置 #

确保你的.main-panel容器在移动端有正确的滚动属性，否则scroll事件根本不会触发：

.main-panel {
  overflow-y: auto; /* 必须设置，容器才会产生滚动区域 */
  -webkit-overflow-scrolling: touch; /* 开启移动端平滑滚动体验 */
  height: 100vh; /* 或者设置固定高度，确保容器有可滚动的空间 */
}

另外，别忘了在HTML头部添加正确的视口设置，避免移动端页面缩放导致的尺寸计算偏差：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

4. 调试验证（快速定位问题） #

可以在scroll事件里打印关键数值，看看移动端的实际计算结果：

$container.scroll(function(e) {
  console.log('当前scrollTop:', $container.scrollTop());
  console.log('底部位置:', $container.prop('scrollHeight') - $container.height());
  // 原逻辑...
});

通过移动端浏览器的远程调试工具（比如Chrome的设备模拟）查看这些值，就能明确是不是精度问题导致的条件不触发。

额外注意事项 #

• 记得在AJAX请求失败时重新启用enableScroll，否则一旦请求出错，滚动加载就会彻底失效
• 如果页面里有动态加载的图片，图片加载完成后会改变容器的scrollHeight，这时候可能需要在图片加载完成后手动触发一次滚动检查

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