博客

当聊天时,有后续新消息的话总将滚动条滚动到最底部。

第一步  获取滚动条所在的dom元素并且存储

// 用于操作聊天列表元素的引用
const chatListRef = useRef(null)

// 获取dom元素
<div className="chat-list" ref={chatListRef}>

第二步 通过

useEffect

监听聊天数据变化，对聊天容器元素的 scrollTop 进行设置：

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

scrollHeight :

一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollTop      :

一个元素的

scrollTop

值是这个元素的

内容顶部

（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的

scrollTop

值为

0

。