移动端浏览器无限滚动加载内容时页面滚动位置异常跳转排查求助

我开发的图片画廊应用带有无限滚动功能，当用户滚动到页面底部时会批量加载新图片，但新增图片后，滚动位置会突然向上跳转数百像素（跳转发生在问题视频的第8秒）。

已排查信息 #

• 仅在移动端Firefox/Chrome、桌面端Firefox/Chrome的响应式模式下出现该问题，常规桌面模式无此现象；
• 跳转并非由布局偏移（layout shift）导致，现有图片的位置始终保持不变；
• 该问题大概率与滚动锚定（scroll anchoring）无关，无论开启或关闭滚动锚定都存在跳转；
• 触发跳转的条件是用户距离页面底部足够近，触发阈值仅取决于视口高度，约为 100vh - 100px；
• 跳转完成后，用户与原页面底部的距离恰好等于上述触发阈值。

排查方向建议 #

1. 校验滚动监听的计算逻辑

   • 确认触发加载的滚动位置计算是否在DOM更新前后出现偏差，比如是否提前错误记录了滚动位置，导致DOM更新后滚动位置被错误重置。
   • 改用document.documentElement.scrollHeight - window.scrollY - window.innerHeight精确计算距离底部的剩余距离，避免依赖动态变化的元素高度进行计算。

2. 检查新图插入的DOM操作

   • 确认新图片是否被插入到了正确的容器位置，避免因插入位置错误（比如插入到现有内容上方）导致页面高度变化时滚动锚点偏移。
   • 给图片设置固定尺寸的占位符，排除图片加载前后占位符与实际尺寸不一致带来的隐性滚动影响。

3. 适配移动端视口特性

   • 移动端浏览器地址栏的隐藏/显示会导致window.innerHeight动态变化，尝试用visualViewport.height替代计算视口高度，避免阈值计算出现误差。
   • 检查容器与body/html的overflow属性设置，避免滚动事件被错误捕获或滚动范围计算冲突。

4. 显式控制滚动位置

   • 在加载新图前后手动保存并恢复滚动位置，避免DOM更新带来的滚动偏移：

     // 加载前记录滚动位置
     const scrollTop = window.scrollY;
     // 执行新图片插入操作
     loadAndInsertImages();
     // DOM渲染完成后恢复位置
     requestAnimationFrame(() => {
       window.scrollTo({ top: scrollTop, behavior: 'instant' });
     });
     

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