React聊天组件加载更多消息后保持当前消息位置的实现

核心思路是在加载新消息前记录当前滚动状态，加载完成后计算并调整滚动位置，确保用户停留在原来查看的消息位置。

1. 添加滚动容器和状态记录的Ref #

首先给滚动容器添加Ref，同时用Ref持久化加载前的滚动位置和消息容器高度（避免组件重渲染丢失值）：

import { useRef, useEffect } from 'react';

// 滚动容器的Ref
const scrollContainerRef = useRef(null);
// 记录加载前的滚动位置和消息高度
const prevScrollTopRef = useRef(0);
const prevMessagesHeightRef = useRef(0);

2. 修改滚动监听逻辑，记录加载前状态 #

在handleScroll触发加载更多时，先记录当前滚动容器的scrollTop和消息容器的高度：

const handleScroll = (e) => {
  const container = e.target;
  // 滚动到顶部且未在加载时，触发加载更多
  if (container.scrollTop === 0 && !isFetchingData) {
    // 记录加载前的关键状态
    prevScrollTopRef.current = container.scrollTop;
    prevMessagesHeightRef.current = document.getElementById('messages').scrollHeight;
    // 执行加载更多消息的逻辑
    fetchMoreMessages();
    // 设置加载状态
    setIsFetchingData(true);
  }
};

3. 绑定Ref到滚动容器 #

把scrollContainerRef绑定到外层滚动的div上：

<div
  ref={scrollContainerRef}
  className='flex flex-col w-full h-full pr-1 justify-between overflow-x-hidden overflow-y-scroll'
  onScroll={handleScroll}>
  <div id='messages' className='flex flex-col grow space-y-4 py-3'>
    {isFetchingData && (
      <div className='flex justify-center items-center'>
        <Spinner size='md' />
      </div>
    )}
    {messages &&
      messages.length > 0 &&
      messages.map((msg) => (
        <ChatMessage
          key={msg.$id}
          room={room}
          message={msg}
          scrollToBottom={scrollToBottom}
        />
      ))}
    <div className='!m-0 !p-0' ref={messagesEndRef} />
  </div>
</div>

4. 更新useEffect，调整加载后的滚动位置 #

当新消息加载完成（messages更新），计算消息容器的高度差，调整滚动位置让用户停留在原查看位置：

useEffect(() => {
  if (shouldScroll) {
    scrollToBottom();
  } 
  // 非初始加载，且是加载更多完成的情况
  else if (!isMessagesLoading && isFetchingData) {
    const container = scrollContainerRef.current;
    if (!container) return;
    
    const newMessagesHeight = document.getElementById('messages').scrollHeight;
    // 计算新消息带来的高度增量
    const heightDiff = newMessagesHeight - prevMessagesHeightRef.current;
    // 设置新的滚动位置：原位置 + 高度增量
    container.scrollTop = prevScrollTopRef.current + heightDiff;
    
    // 重置加载状态
    setIsFetchingData(false);
  }

  if (!isMessagesLoading) {
    setShouldScroll(false);
  }
}, [messages]);

关键说明 #

• 用useRef记录滚动状态是因为它的值在组件重渲染时不会重置，能准确保存加载前的状态。
• 高度差计算确保了滚动位置的偏移量刚好等于新增消息的高度，用户视觉上不会感知到内容跳转。
• 要注意区分初始加载和滚动加载更多的状态，避免初始加载时触发滚动调整逻辑。

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