当消息较多出现滚动条时,有后续新消息的话总将滚动条滚动到最底部。
声明一个 ref 并设置到聊天列表的容器元素上

// 用于操作聊天列表元素的引用
const chatListRef = useRef(null)
<div className="chat-list" ref={chatListRef}>

通过 useEffect 监听聊天数据变化,对聊天容器元素的 scrollTop 进行设置:

// 监听聊天数据的变化,改变聊天容器元素的 scrollTop 值让页面滚到最底部
useEffect(() => {
  const current = chatListRef.current!
  //scrollHeight是页面的高度
  current.scrollTop = current.scrollHeight
}, [messageList])
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐