Chrome浏览器中无限滚动结合scroll-snap时出现滚动位置跳变问题

我之前在做无限滚动+滚动吸附的需求时，也遇到过一模一样的坑——尤其是持续滑动加载新元素时，页面会突然往上跳一个item的高度，屏幕闪一下，体验特别糟。咱们先拆解下问题根源，再给几个经过验证的修复方案。

问题原因分析 #

当你在滑动过程中动态添加新的scroll-snap-item时，容器的scrollHeight会突然增加（毕竟每个item都是100%容器高度）。Chrome的滚动吸附机制会实时计算下一个吸附点，但此时用户还在持续滑动，浏览器的滚动位置计算和新元素的插入时机冲突，导致滚动位置被错误重置到上一个吸附点，也就是出现向上跳变的现象。

修复方案 #

这里有几个实用的解决方法，你可以根据自己的需求选择：

方案1：提前加载，避开滑动临界瞬间插入元素 #

把加载触发的阈值调大，不要等到快滑到底部才加载，给浏览器足够的时间处理滚动吸附的计算逻辑。比如把原来的1700改成容器高度的2-3倍：

element = document.querySelector('.scroll-snap-container')
const containerHeight = element.getBoundingClientRect().height;

element.addEventListener('scroll', function (e) {
  // 提前到距离底部2.5倍容器高度时就触发加载
  if (element.scrollHeight - element.scrollTop - 2.5 * containerHeight < 0) {
    let newChild = document.createElement('div')
    newChild.className = "scroll-snap-item"
    newChild.style.backgroundColor = getRandomColor()
    element.appendChild(newChild)
  }
})

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

方案2：插入元素时临时禁用滚动吸附，插入后恢复 #

通过动态修改scroll-snap-type属性，在添加元素时临时关闭吸附，避免浏览器在元素插入时触发错误的吸附计算：

element = document.querySelector('.scroll-snap-container')
const containerHeight = element.getBoundingClientRect().height;

element.addEventListener('scroll', function (e) {
  if (element.scrollHeight - element.scrollTop - 2 * containerHeight < 1700) {
    // 临时关闭滚动吸附
    element.style.scrollSnapType = 'none';
    
    let newChild = document.createElement('div')
    newChild.className = "scroll-snap-item"
    newChild.style.backgroundColor = getRandomColor()
    element.appendChild(newChild)
    
    // 等待下一帧再恢复吸附，给浏览器足够的渲染时间
    requestAnimationFrame(() => {
      element.style.scrollSnapType = 'y mandatory';
    });
  }
})

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

方案3：手动修正滚动位置 #

在插入新元素后，计算并设置正确的滚动位置，抵消因为容器高度增加导致的跳变：

element = document.querySelector('.scroll-snap-container')
const containerHeight = element.getBoundingClientRect().height;

element.addEventListener('scroll', function (e) {
  if (element.scrollHeight - element.scrollTop - 2 * containerHeight < 1700) {
    // 记录插入前的滚动状态
    const prevScrollTop = element.scrollTop;
    const prevScrollHeight = element.scrollHeight;
    
    let newChild = document.createElement('div')
    newChild.className = "scroll-snap-item"
    newChild.style.backgroundColor = getRandomColor()
    element.appendChild(newChild)
    
    // 计算并设置新的滚动位置，抵消高度变化带来的影响
    const newScrollTop = prevScrollTop + (element.scrollHeight - prevScrollHeight);
    element.scrollTop = newScrollTop;
  }
})

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

额外优化提示 #

• 尽量避免在scroll事件中频繁操作DOM，加上防抖处理可以减少触发频率，提升性能：

  let debounceTimer;
  element.addEventListener('scroll', function (e) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      // 加载逻辑放在这里
    }, 100);
  });
  

• 如果使用了scroll-behavior: smooth，可能会加重跳变问题，必要时可以在加载时临时关闭，加载完成后再开启。

内容的提问来源于stack exchange，提问作者Jonas Märtens