如何在 React 中实现消息容器自动滚动到底部

本文介绍如何利用 `useref` 和 `scrollintoview` 在 react 应用中实现聊天消息列表的自动滚动，确保新消息添加后容器平滑滚动至底部，提升用户体验。

在构建实时聊天或对话式 UI（如 AI 助手界面）时，一个常见且关键的交互需求是：每当新消息被添加到消息列表末尾，容器应自动滚动到底部，使最新消息始终可见。React 本身不提供内置的滚动控制机制，但结合 useRef、useEffect 和原生 DOM 方法 scrollIntoView()，我们可以优雅、高效地实现这一功能。

✅ 核心实现思路

1. 创建一个“锚点”元素：在消息列表
   的末尾插入一个空
   ，并为其绑定 ref（例如 messagesEndRef），作为滚动目标；

   监听消息变化：使用 useEffect 监听存储消息的 state（如 currentChat），当其更新时触发滚动；

   执行平滑滚动：调用 messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })，确保视觉过渡自然。

   ? 完整代码示例

   import { useEffect, useRef, useState } from 'react';
   
   function ChatBox() {
     const [value, setValue] = useState<string>('');
     const [currentChat, setCurrentChat] = useState<Array<{ role: string; content: string }>>([]);
     const messagesEndRef = useRef<HTMLDivElement>(null);
   
     const scrollToBottom = () => {
       messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
   
     // 每当 currentChat 更新，自动滚动到底部
     useEffect(() => {
       scrollToBottom();
     }, [currentChat]);
   
     const getMessages = () => {
       if (!value.trim()) return;
   
       // 模拟发送用户消息 + 接收响应（此处应替换为实际 API 调用）
       const newUserMsg = { role: 'user', content: value };
       const newBotMsg = { role: 'assistant', content: `Echo: ${value}` };
   
       setCurrentChat(prev => [...prev, newUserMsg, newBotMsg]);
       setValue('');
     };
   
     return (
       <div>
         {/* 消息容器 */}
         <ul className="containerMessage">
           {currentChat.map((msg, index) => (
             <li key={index}>
               <p className="role">{msg.role}</p>
               <p>{msg.content}</p><div class="aritcle_card flexRow">
                                                           <div class="artcardd flexRow">
                                                                   <a class="aritcle_card_img" href="/ai/2220" title="标书对比王"><img
                                                                                   src="https://img.php.cn/upload/ai_manual/000/000/000/175680267244663.png" alt="标书对比王"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                   <div class="aritcle_card_info flexColumn">
                                                                           <a href="/ai/2220" title="标书对比王">标书对比王</a>
                                                                           <p>标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。</p>
                                                                   </div>
                                                                   <a href="/ai/2220" title="标书对比王" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                           </div>
                                                   </div>
             </li>
           ))}
           {/* 滚动锚点：必须放在列表末尾 */}
           <div ref={messagesEndRef} />
         </ul>
       </div>
   
       {/* 输入区域 */}
       <div style={{ marginTop: '16px' }}>
         <input
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Type a message..."
           style={{ padding: '8px', marginRight: '8px', width: '70%' }}
         />
         <button onClick={getMessages} style={{ padding: '8px 16px' }}>
           Send
         </button>
       </div>
     );
   }
   
   export default ChatBox;

   ⚠️ 注意事项与最佳实践

   • ref 必须挂载在真实 DOM 元素上：确保
     位于渲染后的 DOM 中（即不能被条件渲染隐藏或移除）；
   • 依赖项要准确：useEffect 的依赖数组应包含真正触发滚动的 state（如 currentChat），避免遗漏更新或过度触发；
   • 性能优化：若消息量极大（如千条以上），可考虑虚拟滚动（如 react-window），但对普通聊天场景，scrollIntoView 性能完全足够；
   • 兼容性：scrollIntoView({ behavior: 'smooth' }) 在现代浏览器中广泛支持；如需兼容旧版 IE，可降级为 behavior: 'auto' 或引入 polyfill；
   • 无障碍友好：自动滚动本身不影响可访问性，但建议配合 aria-live="polite" 在新增消息时通知屏幕阅读器（进阶可选）。

   通过以上方式，你无需操作 scrollTop 或手动计算高度，即可实现简洁、可靠、符合 React 声明式思维的自动滚动逻辑。