大模型对话框自动滚动是如何实现的？

Huy小于 1 分钟

在大模型对话界面中，有一个这样的逻辑：

新消息会自动滚动到底部
用户向上查看历史时，自动滚动会停止
当用户滚回到底部时，自动滚动又会恢复

这个可以用一个滚动状态机来实现。

核心逻辑

监听滚动事件，判断用户是否在底部？

如果在底部，开启自动滚动
如果不在底部，关闭自动滚动
回到底部，恢复自动滚动

const containerRef = useRef(null)
const [isAtBottom, setIsAtBottom] = useState(true)

useEffect(() => {
  const el = containerRef.current

  const handleScroll = () => {
    // 这里加一点容错；
    // scrollTop：当前滚动位置；clientHeight： 可视区域高度
    // scrollHeight: 总内容高度
    const bAtBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 10

    setIsAtBottom(bAtBottom)
  }

  el.addEventListener('scroll', handleScroll)
  return () => el.removeEventListener('scroll', handleScroll)
}, [])

useEffect(() => {
  if (isAtBottom) {
    containerRef.current.scrollTop = containerRef.current.scrollHeight
  }
}, [messages])

大模型对话框自动滚动是如何实现的？

# 核心逻辑

核心逻辑