基本信息
- 来源: juejin
- 原始来源: https://juejin.cn/post/7611345744185524262
来源摘要/节选
公开展示已截断至最多 800 个字符；请访问原始来源查看完整上下文。
在 AI 流式输出（Streaming）场景下，这更是一个高频痛点：AI 正在逐字蹦出回复，容器高度持续增长，如果用户此时正在 向上翻看 5 分钟前的历史记录 ，新消息的注入会不断把滚动条向下“推”，导致用户视野内的文字疯狂跳动，这就是典型的 “滚动夺权” 问题。 要优雅地解决这个“小而疼”的问题，我们需要从底层的滚动机制入手，而不仅仅是简单的 scrollTo 。
- 核心原理：锚点锁定 (Scroll Anchoring) 现代浏览器（Chrome 56+）其实内置了 overflow-anchor: auto 属性，旨在自动处理内容增长时的位置锁定。但在复杂的 AI 聊天室（涉及图片、代码块异步渲染）中，原生机制往往会失效。 我们需要手动实现一套 “视口守卫” 逻辑： 判断状态 ：用户是否处于“触底”状态？ 锁定决策 ：如果在底部，随新消息滚动；如果不在底部，锁定当前像素偏移。
- 实战方案：IntersectionObserver 方案 传统的 onscroll 监听性能极差，且在流式输出的高频更新下容易掉帧。我们使用 IntersectionObserver 监听聊天框底部的“哨兵”节点。…
来源说明
当前只保存了公开页面节选，不代表原文全文。请以原始来源为准。
本页只呈现已做哈希绑定的来源证据，不包含基于旧正文或缺失原文的扩展推断。