React实现类似Facebook Messenger加载旧消息时保持滚动位置

核心思路是加载旧消息前记录容器滚动状态，更新DOM后调整滚动位置抵消偏移，具体实现步骤如下：

1. 绑定聊天容器的Ref #

用useRef获取聊天容器的DOM元素，方便后续操作滚动属性：

import { useRef, useState } from 'react';

const ChatBox = () => {
  const chatContainerRef = useRef(null);
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  // 其余逻辑...
};

2. 加载旧消息时记录滚动状态 #

在发起加载请求前，先记录容器当前的scrollHeight（总滚动高度）和scrollTop（距离顶部的滚动距离），后续用这两个值计算偏移量：

const loadOldMessages = async () => {
  if (isLoading) return; // 防止重复加载
  setIsLoading(true);

  const container = chatContainerRef.current;
  if (!container) return;

  // 记录加载前的滚动状态
  const preScrollHeight = container.scrollHeight;
  const preScrollTop = container.scrollTop;

  // 替换成你的实际接口调用
  const oldMessages = await new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { id: Date.now() - 3, content: '旧消息3' },
        { id: Date.now() - 2, content: '旧消息2' },
        { id: Date.now() - 1, content: '旧消息1' },
      ]);
    }, 500);
  });

  // 将旧消息添加到现有消息列表的头部
  setMessages(prev => [...oldMessages, ...prev]);

  // DOM更新后调整滚动位置
  requestAnimationFrame(() => {
    const postScrollHeight = container.scrollHeight;
    // 计算新的滚动位置：原滚动距离 + 新增内容带来的高度差
    container.scrollTop = preScrollTop + (postScrollHeight - preScrollHeight);
    setIsLoading(false);
  });
};

3. 监听滚动事件触发加载 #

给聊天容器绑定onScroll事件，当滚动到顶部附近时触发加载：

const handleScroll = () => {
  const container = chatContainerRef.current;
  if (!container || isLoading) return;

  // 滚动距离顶部小于等于10px时触发加载（可根据需求调整阈值）
  if (container.scrollTop <= 10) {
    loadOldMessages();
  }
};

4. 渲染聊天容器 #

将ref和滚动事件绑定到容器上，注意设置固定高度和滚动属性：

return (
  <div
    ref={chatContainerRef}
    onScroll={handleScroll}
    style={{
      height: '600px',
      overflowY: 'auto',
      border: '1px solid #eee',
      padding: '10px',
    }}
  >
    {messages.map(msg => (
      <div key={msg.id} style={{ marginBottom: '8px' }}>
        {msg.content}
      </div>
    ))}
    {isLoading && <div style={{ textAlign: 'center', padding: '8px' }}>加载中...</div>}
  </div>
);

额外注意事项 #

• 避免重复加载：通过isLoading状态控制，防止滚动时多次触发请求。
• 容器样式问题：如果容器有内边距，确保scrollHeight计算准确，建议用padding而非margin来控制内间距。
• 同步调整滚动：如果requestAnimationFrame效果不佳，可改用useLayoutEffect，在DOM更新完成后同步调整滚动位置（需将preScrollHeight和preScrollTop存入状态或ref中）。

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