React聊天应用首次加载时实现消息div自动滚动到底部的方法

核心实现思路 #

通过React Ref获取DOM节点的真实高度，手动触发滚动行为即可，以下是最常用的两种实现方式：

方式1：直接操作消息容器滚动（推荐） #

• 第一步：给消息容器绑定Ref，同时确保容器设置了固定高度和overflow-y: auto属性，否则滚动逻辑不生效

import { useRef, useState, useEffect } from 'react';

function ChatApp() {
  // 消息列表状态
  const [messages, setMessages] = useState([]);
  // 创建容器Ref
  const messageContainerRef = useRef(null);

  // 模拟首次加载拉取消息
  useEffect(() => {
    fetch('/api/messages')
      .then(res => res.json())
      .then(data => setMessages(data));
  }, []);

  // 滚动到底部的逻辑
  useEffect(() => {
    const container = messageContainerRef.current;
    // 确保容器存在且有消息内容时再执行滚动
    if (container && messages.length) {
      container.scrollTop = container.scrollHeight;
    }
    // 依赖项填写messages，保证首次消息加载完成后才触发滚动
    // 如果仅需要首次加载滚动，后续新消息不自动滚动，可以把依赖项改为空数组，但要保证执行时消息已经渲染完成
  }, [messages]);

  return (
    <div>
      {/* 绑定Ref到消息容器 */}
      <div 
        ref={messageContainerRef}
        style={{ height: '600px', overflowY: 'auto' }}
      >
        {messages.map(msg => (
          <div key={msg.id} className="message-item">
            {msg.content}
          </div>
        ))}
      </div>
    </div>
  );
}

方式2：锚点滚动 #

如果不想计算容器高度，可以在消息列表末尾加一个隐藏的锚点元素，直接滚动到锚点位置即可：

function ChatApp() {
  const [messages, setMessages] = useState([]);
  const messageEndRef = useRef(null);

  useEffect(() => {
    fetch('/api/messages').then(res => res.json()).then(setMessages);
  }, []);

  useEffect(() => {
    // 滚动到锚点位置，加behavior: 'smooth'可以实现平滑滚动效果
    messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div style={{ height: '600px', overflowY: 'auto' }}>
      {messages.map(msg => (
        <div key={msg.id} className="message-item">
          {msg.content}
        </div>
      ))}
      {/* 锚点元素 */}
      <span ref={messageEndRef} />
    </div>
  );
}

注意事项 #

• 如果消息内容包含图片等异步加载的资源，需要等资源加载完成后再执行滚动，否则计算的高度会偏小，滚动不到真正的底部
• React18严格模式下useEffect会执行两次，属于正常行为，不会影响滚动效果

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