消息回复时 滚动条自动滚动到最底部
当聊天时,有后续新消息的话总将滚动条滚动到最底部。
第一步 获取滚动条所在的dom元素并且存储
// 用于操作聊天列表元素的引用
const chatListRef = useRef(null)// 获取dom元素
第二步 通过 useEffect 监听聊天数据变化，对聊天容器元素的 scrollTop 进行设置：
// 监听聊天数据的变化，改变聊天容器元素的 scrollTop 值让页面滚到最底部
useEffect(() => {const current = chatListRef.current!current.scrollTop = current.scrollHeight
}, [messageList])scrollHeight :一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
scrollTop :一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！