Google Chrome中无限滚动在快速滚动/滑动时失效问题求助

实现了一个无限滚动容器：列表向上滚动时从底部追加条目到顶部，向下滚动时从顶部追加条目到底部。正常滚动时功能符合预期，但仅在Chrome浏览器中，使用笔记本触控板或触摸屏大力滑动时，滚动条会触顶，必须再次滚动才能恢复无限滚动功能。需求是无论用户滑动力度多大，滚动条都不会触顶，保持功能正常。

原代码 #

let container = document.querySelector('.calendar-container')
let calendar = document.querySelector('.calendar')

container.addEventListener('scroll', function (event) {

  const factor = container.scrollTop / (container.scrollHeight - container.offsetHeight);
  if(factor < 0.4) {
      let move = calendar.querySelector(':last-child')
      move.remove();
      calendar.prepend(move);
  } else if(factor > 0.6) {
      let move = calendar.querySelector(':first-child')
      move.remove();
      calendar.append(move);
  }

});

calendar.scroll(0,100);

解决方案 #

问题根源是快速滚动时，scroll事件的触发频率跟不上滚动速度，导致DOM元素调整滞后，scrollTop瞬间触顶/触底后无法自动修正。核心解决方法是在移动DOM元素后，同步调整容器的scrollTop，维持滚动位置的相对偏移。

修改后的代码如下：

let container = document.querySelector('.calendar-container')
let calendar = document.querySelector('.calendar')

container.addEventListener('scroll', function (event) {
  const scrollDiff = container.scrollHeight - container.offsetHeight;
  // 避免初始加载时scrollDiff为0导致的除法错误
  if (scrollDiff === 0) return;
  
  const factor = container.scrollTop / scrollDiff;
  
  if(factor < 0.4) {
      const itemHeight = calendar.firstElementChild.offsetHeight;
      const currentScroll = container.scrollTop;
      
      let move = calendar.querySelector(':last-child')
      move.remove();
      calendar.prepend(move);
      
      // 将最后一项移到顶部后，内容整体上移了一个item高度，所以scrollTop要增加对应值，保持视觉位置不变
      container.scrollTop = currentScroll + itemHeight;
  } else if(factor > 0.6) {
      const itemHeight = calendar.firstElementChild.offsetHeight;
      const currentScroll = container.scrollTop;
      
      let move = calendar.querySelector(':first-child')
      move.remove();
      calendar.append(move);
      
      // 将第一项移到底部后，内容整体下移了一个item高度，所以scrollTop要减少对应值，保持视觉位置不变
      container.scrollTop = currentScroll - itemHeight;
  }
});

calendar.scroll(0,100);

关键优化点 #

• 移动DOM前后记录scrollTop，根据单个列表项的高度调整scrollTop值，确保滚动的视觉位置连续，不会跳变或触顶
• 增加scrollDiff === 0的判断，避免初始阶段的计算错误
• 修正后无论滚动速度快慢，DOM调整后都会立刻同步修正滚动位置，彻底解决Chrome中快速滚动的异常问题

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