React中新增数据时滚动条固定底部出现闪烁的原因及解决方法

首先，咱们来拆解你遇到的滚动条闪烁问题——本质上是滚动操作和DOM更新不同步导致的视觉跳动，具体原因有这几点：

为什么会出现闪烁？ #

1. DOM渲染与滚动时序差：你依赖msgs变化触发useEffect来设置scrollTop，虽然useEffect会在DOM更新后执行，但浏览器的重排/重绘和你的滚动设置可能存在微小的时间差。新消息添加后，浏览器会先调整滚动条位置（比如保持原有可见区域），随后你的代码再把它拉到底部，这一“先上后下”的过程就造成了闪烁。
2. 不必要的滚动强制复位：不管当前滚动条是否在底部，你的代码都会强制把它拉到底部。哪怕用户手动滚动过，也会被强行复位，这不仅影响体验，也会加剧闪烁感。
3. scrollHeight计算的延迟：在某些布局下（比如消息元素有margin/padding），scrollHeight的计算可能滞后于DOM渲染，导致设置scrollTop时用了旧的高度值，后续浏览器修正时又会产生跳动。

修复方案 #

下面给你几个逐步优化的方案，从简单到完善：

方案1：用requestAnimationFrame同步滚动操作 #

把滚动操作放到requestAnimationFrame里，让它和浏览器的重绘周期同步，避免时序差带来的闪烁：

const scrollToMyRef = () => {
  if (myRef.current) {
    // 让滚动操作在浏览器下一次重绘前执行
    requestAnimationFrame(() => {
      myRef.current!.scrollTop = myRef.current!.scrollHeight;
    });
  }
};

方案2：仅在底部时自动滚动（优化用户体验） #

添加一个判断：只有当用户当前已经在滚动底部时，才自动滚动到底部。这样用户手动浏览历史消息时，不会被强行打断，同时也减少了不必要的滚动操作：

const scrollToMyRef = () => {
  const container = myRef.current;
  if (!container) return;

  // 允许1px的误差，避免滚动条自身高度导致的误判
  const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 1;
  if (isAtBottom) {
    requestAnimationFrame(() => {
      container.scrollTop = container.scrollHeight;
    });
  }
};

方案3：用scrollIntoView精准定位最后一条消息 #

如果之前用scrollIntoView没效果，大概率是没配置正确的参数。我们可以给最后一条消息加ref，直接让它滚动到视图底部：

const App = () => { 
  const myRef = useRef<HTMLDivElement>(null);
  const lastMsgRef = useRef<HTMLDivElement>(null); // 新增最后一条消息的ref
  const [msgs, setMsgs] = useState<string[]>([]) 
  const [text, setText] = useState<string>("") 

  useEffect(() => {
    // 让最后一条消息滚动到视图底部，behavior设为auto避免动画闪烁
    lastMsgRef.current?.scrollIntoView({
      block: 'end',
      behavior: 'auto'
    });
  }, [msgs]) 

  const handleInput = (e: React.KeyboardEvent<HTMLInputElement>) => { 
    if (e.key === 'Enter') { 
      setMsgs(prevState => [...prevState, text]) 
      setText(''); // 这里记得清空输入框哦
    } 
  } 

  return ( 
    <div className="app"> 
      <div className="container" ref={myRef}> 
        <div className="messages-list"> 
          { msgs.map((msg, i) => ( 
            // 只有最后一条消息才绑定ref
            <div key={i} ref={i === msgs.length - 1 ? lastMsgRef : null}>{msg}</div> 
          )) } 
        </div> 
        <div className="form"> 
          <input 
            type="text" 
            onKeyPress={handleInput} 
            value={text} 
            onChange={(e) => setText(e.target.value)} 
          /> 
          <input type="button" value="add" onClick={() => {
            setMsgs(prev => [...prev, text]);
            setText('');
          }} /> {/* 给按钮也加点击事件 */}
        </div> 
      </div> 
    </div> 
  ); 
}

这个方案的优势是直接定位到最新消息，滚动更精准，也能避免容器scrollHeight计算不准的问题。

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