本文介绍如何使用 react 的 `useref` 和 `scrollintoview` 实现消息列表新增时自动滚动到底部，确保最新消息始终可见，无需用户手动拖动滚动条。
在构建实时聊天界面时，一个关键的用户体验细节是：每当新消息（无论是用户输入还是服务端响应）被添加到消息列表中，容器应自动滚动至底部，使最新消息立即可见。React 本身不提供内置的滚动控制，但结合 useRef 和原生 DOM 方法，我们可以优雅、高效地实现这一功能。
✅ 核心实现思路
- 创建一个“锚点”元素：在 <ul> 列表末尾添加一个空 <div>，并绑定 ref；
- 监听消息数据变化：使用 useEffect 监听 currentChat（即消息列表状态）的变化；
- 触发平滑滚动：每次列表更新后，调用 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 [currentTitle, setCurrentTitle] = useState<string | null>(null);
const [message, setMessage] = useState<{ content: string } | null>(null);
const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
// 监听 currentChat 变化，自动滚动
useEffect(() => {
scrollToBottom();
}, [currentChat]);
// 模拟发送逻辑（请按实际业务替换）
const getMessages = () => {
if (!value.trim()) return;
const newAuthMsg = { role: 'auth', content: value };
const newResponseMsg = { role: 'message:', content: message?.content || 'Hello! How can I help?' };
setCurrentChat(prev => [...prev, newAuthMsg, newResponseMsg]);
setValue('');
};
return (
<div className="chat-container">
{/* 消息容器 —— 注意：必须设置固定高度 + overflow-y */}
<ul className="containerMessage" style={{ maxHeight: '400px', overflowY: 'auto' }}>
{currentChat.map((chatMessage, index) => (
<li key={index} className="message-item">
<p className="role">{chatMessage.role}</p>
<p>{chatMessage.content}</p>
</li>
))}
{/* 关键：滚动锚点，置于列表末尾 */}
<div ref={messagesEndRef} />
</ul>
{/* 输入区域 */}
<div className="input-area" style={{ marginTop: '12px' }}>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type a message..."
style={{ padding: '8px 12px', width: '70%' }}
/>
<button id="submit" onClick={getMessages} style={{ marginLeft: '8px', padding: '8px 16px' }}>
Send
</button>
</div>
</div>
);
}
export default ChatBox;⚠️ 重要注意事项
- CSS 必须启用滚动：.containerMessage 需设置 max-height 和 overflow-y: auto（或 scroll），否则 scrollIntoView 无效；
- 避免重复渲染导致抖动：确保 useEffect 依赖项精准（如仅依赖 currentChat），不要包含频繁变化的变量（如 value）；
- 首次加载也需滚动：如果初始消息已存在，useEffect 在挂载时会自动触发一次滚动；
- 兼容性提示：behavior: "smooth" 在现代浏览器中支持良好；若需兼容旧版 IE，可降级为 behavior: "auto" 或使用 scrollTop 手动计算；
- 性能优化（进阶）：对于超长消息流，可考虑 useCallback 包裹 scrollToBottom，或使用 requestIdleCallback 延迟非关键滚动。
✅ 总结
通过 useRef 获取 DOM 节点 + scrollIntoView + 精准的 useEffect 依赖控制，即可零第三方库实现可靠、流畅的自动滚动。该方案轻量、可预测、易于维护，是 React 聊天应用中的推荐实践。
