目录标题
简介
j实现滚动条一直是在底部靠的是元素的scrollTop和scrollHeight来实现的,但是在react中是行不通的。
当消息较多出现滚动条时,有后续新消息的话总将滚动条滚动到最底部。
1、首先,先声明一个 ref 并设置到聊天列表的容器元素上
// 用于操作聊天列表元素的引用
const chatListRef = useRef(null)
2、在内容信息中进行一个ref引用
<div className="chat-list" ref={chatListRef}>
如下图所示:
是在自己要滚动的位置进行ref引用。
3、通过 useEffect 监听聊天数据变化,对聊天容器元素的 scrollTop 进行设置:
/*监听聊天数据的变化,改变聊天容器元素的 scrollTop 值让页面滚到最底部*/
useEffect(() => {
const current = chatListRef.current!
console.log(current.scrollHeight, '137'); /*打印出来是监听的页面高度*/
//scrollHeight是页面的高度
current.scrollTop = current.scrollHeight
}, [rightList]) /*rightList 是自己渲染滚动的数据*/