React Hooks实现Div内滚动：清空搜索框无法恢复滚动位置的问题

你的问题核心是清空搜索框时，useEffect内的scrollTo未生效，但其他位置调用正常，主要可能是DOM更新时机、依赖项缺失或滚动位置保存时机不对导致的，以下是具体排查和解决方法：

1. 补全依赖项 #

你的useEffect依赖数组里缺少scrollPosition——如果scrollPosition是用useState声明的状态变量，未将其加入依赖会导致useEffect无法获取最新的滚动位置值，进而影响滚动效果。

修正后的代码：

useEffect(() => {
  if (!tableWrapperRef.current) return;
  if (!filterText) {
    tableWrapperRef.current.scrollTo({ top: scrollPosition });
  }
}, [tableWrapperRef, filterText, scrollPosition]) // 新增scrollPosition到依赖数组

2. 改用useLayoutEffect适配DOM更新时机 #

清空搜索框后，列表会从筛选状态恢复为全量渲染，DOM的高度和结构需要时间更新。useEffect是异步执行的，可能在DOM更新完成前就调用了scrollTo，导致滚动操作无效。

useLayoutEffect会在DOM更新完成后同步执行，能确保滚动时列表已经渲染完毕：

import { useLayoutEffect } from 'react';

useLayoutEffect(() => {
  if (!tableWrapperRef.current) return;
  if (!filterText) {
    tableWrapperRef.current.scrollTo({ top: scrollPosition, behavior: 'auto' });
  }
}, [filterText, scrollPosition])

3. 修正滚动位置的保存时机 #

你需要在用户第一次触发搜索时保存滚动位置，而非每次搜索内容变化都保存。可以用useRef记录之前的搜索状态：

const prevFilterTextRef = useRef('');

useEffect(() => {
  // 仅当搜索框从空变为有内容时，保存当前滚动位置
  if (filterText && !prevFilterTextRef.current) {
    setScrollPosition(tableWrapperRef.current?.scrollTop || 0);
  }
  prevFilterTextRef.current = filterText;
}, [filterText])

额外排查点 #

• 确认tableWrapperRef正确绑定到了带有overflow: auto/overflow: scroll的可滚动容器上
• 检查scrollPosition是否为合法数值（排除undefined、NaN等异常情况）

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