React：解决动态消息列表加载时的滚动位置留存问题

核心思路 #

向消息列表顶部添加旧消息时，滚动容器总高度会增加，原本的滚动位置相对顶部距离不变，导致视觉上内容被“顶上去”。要保持现有消息的屏幕位置，需：

1. 添加旧消息前，记录滚动容器的总高度和当前滚动距离
2. 更新消息列表后，计算新增内容的高度差，调整滚动位置抵消高度变化

具体实现步骤 #

1. 给滚动容器添加Ref #

为滚动的div添加ref，方便操作DOM元素：

const scrollContainerRef = useRef(null);

// 修改JSX中的滚动容器
<div ref={scrollContainerRef} style={{ overflowY: "scroll", height: "100%" }}>
  {/* 原有内容 */}
</div>

2. 用Ref保存滚动状态 #

用两个ref存储添加旧消息前的滚动参数，避免组件重渲染后丢失数据：

const prevScrollHeightRef = useRef(0);
const prevScrollTopRef = useRef(0);

3. 修改fetchMorePhrases函数 #

在请求旧消息前，先记录当前滚动容器的状态：

const fetchMorePhrases = async () => {
  const scrollContainer = scrollContainerRef.current;
  if (!scrollContainer) return;

  // 记录当前滚动状态
  prevScrollHeightRef.current = scrollContainer.scrollHeight;
  prevScrollTopRef.current = scrollContainer.scrollTop;

  // 请求旧消息（替换为你的实际请求逻辑）
  const newOldPhrases = await getOldMessages();
  // 将新获取的旧消息添加到列表头部（适配awfulPhrases的oldest first排序）
  setAwfulPhrases(prev => [...newOldPhrases, ...prev]);
};

4. 监听消息列表变化，调整滚动位置 #

用useEffect在消息列表更新、DOM渲染完成后调整滚动位置：

useEffect(() => {
  const scrollContainer = scrollContainerRef.current;
  if (!scrollContainer) return;

  // 计算新增内容带来的高度差
  const heightAdded = scrollContainer.scrollHeight - prevScrollHeightRef.current;
  // 调整滚动位置，让原有内容保持在屏幕原位
  scrollContainer.scrollTop = prevScrollTopRef.current + heightAdded;
}, [awfulPhrases]);

关于消息更新的补充说明 #

你使用的setAwfulPhrases([...awfulPhrases, newPhrase])是添加最新消息的正确写法（适配oldest first排序）。为避免异步更新时的状态不一致，建议改用函数式更新：

setAwfulPhrases(prev => [...prev, newPhrase]);

这种写法确保基于最新状态更新，更适合新消息订阅这类异步场景。

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