流式输出自动滚动需智能判断用户意图：设距底阈值（如50px），仅当距底距离≤阈值且未被用户主动上滑干预时才滚动；小程序中可用scroll-view监听bindscroll，结合scrollTop与scrollHeight动态控制。

流式输出场景下，自动滚动不能简单粗暴地“每次更新都滚到底”，关键在于判断用户当前意图：如果人正在看历史消息，就别打断；只有快到底了，才帮一把。核心是用“距离底部阈值”代替“是否在底部”的二值判断，并配合滚动状态感知。

检测是否靠近底部，而非是否在底部

每次消息更新后，不直接滚动，而是先算当前滚动位置离容器底边还有多远：

• 公式是：距底距离 = scrollHeight − scrollTop − clientHeight
• 设定一个合理阈值（如 50px 或 100px），只要该距离 ≤ 阈值，就执行 scrollIntoView 或设置 scrollTop
• 这样即使用户手动上滑了一点但还没完全离开底部区域，新消息到来时仍能自然衔接，不会突兀跳走

标记用户是否已主动离开底部

仅靠距离判断还不够——用户可能已上滑到中间，此时再有新消息，绝对不该滚动。需要用 ref 记录一次“用户已干预”状态：

• 监听容器的 scroll 事件，一旦 scrollTop > 0 且距底距离 > 阈值，就设 isUserScrolled = true
• 后续消息更新时，只在 !isUserScrolled 时才触发滚动
• 当用户再次拖动接近底部（距底 ≤ 阈值），可重置 isUserScrolled = false，恢复自动滚动逻辑

微信小程序中的等效实现

小程序没有原生 scrollHeight 监听，需换思路：

• 用 scroll-view 包裹消息列表，设固定高度（如 80vh）并开启 scroll-y
• 每次新增消息后，调用 scroll-into-view 指向最后一条消息的唯一 id（推荐），或计算内容总高度后设置 scroll-top
• 监听 scroll-view 的 bindscroll 事件，通过 e.detail.scrollTop 和 e.detail.scrollHeight 判断是否靠近底部，逻辑同 Web 端

避免频繁重排导致的滚动抖动

流式输出常逐字/逐 token 更新，若每次 DOM 变更都触发滚动判断，易卡顿：

• 用 useEffect（React）或 watch（Vue）监听消息数组长度或最后一条内容变化，而非每帧渲染都检查
• 滚动操作加 setTimeout(..., 0) 或 requestIdleCallback，让浏览器先完成渲染再滚动
• 对 scrollIntoView 使用 { behavior: 'smooth', block: 'nearest' }，避免强制跳到底部破坏阅读连续性