本文介绍如何利用 `useref` 和 `scrollintoview` 在 react 应用中实现聊天消息列表的自动滚动，确保新消息添加后容器平滑滚动至底部，提升用户体验。
在构建实时聊天或对话式 UI（如 AI 助手界面）时，一个常见且关键的交互需求是：每当新消息被添加到消息列表末尾，容器应自动滚动到底部，使最新消息始终可见。React 本身不提供内置的滚动控制机制，但结合 useRef、useEffect 和原生 DOM 方法 scrollIntoView()，我们可以优雅、高效地实现这一功能。
✅ 核心实现思路
- 创建一个“锚点”元素：在消息列表 <ul> 的末尾插入一个空 <div>，并为其绑定 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>
</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 元素上：确保 <div ref={messagesEndRef} /> 位于渲染后的 DOM 中（即不能被条件渲染隐藏或移除）；
- 依赖项要准确：useEffect 的依赖数组应包含真正触发滚动的 state（如 currentChat），避免遗漏更新或过度触发；
- 性能优化：若消息量极大（如千条以上），可考虑虚拟滚动（如 react-window），但对普通聊天场景，scrollIntoView 性能完全足够；
- 兼容性：scrollIntoView({ behavior: 'smooth' }) 在现代浏览器中广泛支持；如需兼容旧版 IE，可降级为 behavior: 'auto' 或引入 polyfill；
- 无障碍友好：自动滚动本身不影响可访问性，但建议配合 aria-live="polite" 在新增消息时通知屏幕阅读器（进阶可选）。
通过以上方式，你无需操作 scrollTop 或手动计算高度，即可实现简洁、可靠、符合 React 声明式思维的自动滚动逻辑。
