简介

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 是自己渲染滚动的数据*/