React滚动条优化-滚动条滚动到最底部

最新推荐文章于 2024-08-16 07:50:40 发布

小脚裤了都

最新推荐文章于 2024-08-16 07:50:40 发布

阅读量4.2k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/cvvvvvvvvvv/article/details/121720732

版权

该博客介绍了如何在React应用中实现聊天界面的滚动优化。通过使用`useRef`创建聊天列表的引用，并结合`useEffect`监听聊天数据变化，当新消息到来时自动将滚动条滚动到聊天列表底部，确保用户始终能看到最新消息。

摘要由CSDN通过智能技术生成

当消息较多出现滚动条时，有后续新消息的话总将滚动条滚动到最底部。
声明一个 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])