React Infinite Scroll翻页时滚动条跳至顶部问题求助

你使用React Infinite Scroll Component结合ReactTabulator实现的无限滚动组件，每次调用fetchMoreData()加载下一页数据时滚动条跳至顶部，可通过以下几种方法解决：

1. 确保数据追加而非替换，给表格添加稳定Key #

ReactTabulator在数据更新时如果是完全替换数组，可能会重新渲染整个表格，导致滚动位置重置。确保新数据是追加到现有数据中，同时给ReactTabulator添加固定的key，避免不必要的重渲染：

// 数据更新时使用追加逻辑
const fetchMoreData = async () => {
  setLoading(true);
  const newPageData = await /* 你的分页接口请求逻辑 */;
  // 追加新数据到现有数组
  setData(prevData => [...prevData, ...newPageData]);
  setHasMore(newPageData.length > 0);
  setLoading(false);
};

修改组件中的ReactTabulator部分，添加稳定key：

<ReactTabulator 
  key="infinite-scroll-table" 
  columns={tableColumns} 
  data={data} 
  tooltips={true} 
/>

2. 手动保存并恢复滚动位置 #

在加载新数据前记录当前滚动位置，数据加载完成后恢复该位置：

const fetchMoreData = async () => {
  // 记录当前滚动位置（针对window全局滚动）
  const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  
  setLoading(true);
  const newPageData = await /* 你的分页接口请求逻辑 */;
  
  setData(prev => [...prev, ...newPageData]);
  setHasMore(newPageData.length > 0);
  setLoading(false);
  
  // 用setTimeout确保DOM更新完成后再恢复滚动位置
  setTimeout(() => {
    window.scrollTo({
      top: scrollPosition,
      behavior: 'auto'
    });
  }, 0);
};

如果滚动容器是自定义DOM元素（比如某个带滚动的div），则改为获取该元素的scrollTop：

const scrollContainer = document.querySelector('.your-scroll-container');
const scrollPosition = scrollContainer.scrollTop;

// 恢复滚动位置时
scrollContainer.scrollTop = scrollPosition;

3. 检查InfiniteScroll组件的核心配置 #

确认dataLength始终等于当前data数组的长度，这是组件判断是否触发下一页的关键。另外，避免在加载过程中错误地将hasMore设为false再切换回true，这可能触发组件的异常滚动行为。

4. 排查CSS布局问题 #

如果表格容器的高度在数据加载时发生突变，也会导致滚动条跳顶。确保表格容器设置了明确的高度或最大高度，并开启垂直滚动：

.your-table-container {
  max-height: 80vh;
  overflow-y: auto;
}

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