React中调用scrollTo滚动到页面底部位置不准确问题求解

• React状态更新与DOM渲染完成存在时序差：setMessages更新状态后，依赖messages的useEffect会在React完成更新调度后立即触发，但此时浏览器还没完成最终的布局重绘，列表DOM没有完全挂载，页面高度还未撑开，此时读取的元素位置是更新前的旧值，所以滚动位置不对。
• 滚动API使用错误：HTMLElement.scrollTo() 方法的作用是滚动元素内部的内容，你需要实现的是将页面视口滚动到目标元素位置，应该使用scrollIntoView()方法。

1. 基础修复（适配90%场景） #

使用requestAnimationFrame等待浏览器完成一次重绘，确保DOM渲染完成、高度计算完毕后再执行滚动，同时替换正确的滚动API：

useEffect(() => {
  requestAnimationFrame(() => {
    endOfPageRef.current?.scrollIntoView({
      behavior: 'auto', // 需要平滑滚动可改为smooth
      block: 'end'
    })
  })
}, [messages])

2. 存在异步资源加载场景的修复 #

如果列表项包含图片、音视频等异步加载的资源，资源加载完成后还会再次撑开页面高度，可使用ResizeObserver监听容器尺寸变化，自动触发滚动：

useEffect(() => {
  const rootContainer = document.querySelector('.root')
  if (!rootContainer) return

  const resizeObserver = new ResizeObserver(() => {
    endOfPageRef.current?.scrollIntoView()
  })
  resizeObserver.observe(rootContainer)
  
  return () => resizeObserver.disconnect()
}, [])

3. 自定义列表组件场景的修复 #

如果MessageList内部做了虚拟滚动、懒加载等优化，即使messages更新也不会一次性渲染所有节点，需要在MessageList组件中暴露所有列表项渲染完成的回调，在回调中执行滚动逻辑。

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