局部滚动容器必须显式设置scroll-behavior: smooth，不能继承html或body的声明；需同时满足overflow-y: auto、内容高度超过容器高度、无overflow: hidden父级截断，且目标元素dom必须已挂载。
局部滚动容器没设 scroll-behavior
局部滚动（比如聊天窗口、侧边菜单、弹窗内容区）默认不继承全局 scroll-behavior: smooth，必须显式加在该容器上。只给 html 或 body 设置，对局部容器完全无效。
常见错误写法：body { scroll-behavior: smooth; } —— 这个规则既不生效，还可能被重置 CSS 覆盖。
- 正确做法：找到实际滚动的容器（如
.chat-history），直接加样式：scroll-behavior: smooth; - 必须同时满足：
overflow-y: auto（或scroll）、内容高度 > 容器高度、无overflow: hidden父级截断 - 如果容器是懒加载或条件渲染（如 Vue 的
v-if），调用scrollIntoView()前要确保 DOM 已挂载，否则静默失败
scrollIntoView 作用对象错了
对目标元素调用 element.scrollIntoView({ behavior: "smooth" })，默认滚动的是整个文档（document.scrollingElement），不是你期望的局部容器。
结果就是：目标元素“跳”到视口顶部，但局部容器纹丝不动。
- 解决方式：不要用
scrollIntoView，改用容器的scrollTo() - 先获取容器：
const container = document.querySelector(".scroll-container") - 再算偏移：
const target = document.querySelector("#msg-123"); const top = target.offsetTop - container.offsetTop（适用于无 transform / padding 干扰的简单布局） - 最后滚动：
container.scrollTo({ top, behavior: "smooth" })
iOS 下局部滚动卡死或无惯性
在 iOS Safari 或 WKWebView 中，局部滚动常因 -webkit-overflow-scrolling 缺失或错位而失去惯性、卡顿甚至完全失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
这个属性不能写在 body 上，也不能靠继承；它只对「设置了固定高度/最大高度 + overflow-y: auto」的块级容器生效。
- 错误：
body { -webkit-overflow-scrolling: touch; }→ 无效 - 正确：
.scroll-container { height: 400px; overflow-y: auto; -webkit-overflow-scrolling: touch; } - iOS 13+ 已默认启用惯性滚动，但保留该声明可兼容老版本；去掉反而可能导致 iOS 12 及更早白屏
- 若容器内有
position: fixed子元素，可能破坏滚动上下文，建议改用position: sticky或相对定位
滚动容器被 position: fixed 遮罩覆盖
当页面存在全屏 position: fixed 遮罩层（如 loading 蒙层、模态框背景）时，浏览器会把滚动权交给遮罩层本身，而非原本的 html 或局部容器——导致局部滚动突然失灵。
此时检查 DevTools 的 “Computed” 面板，你会发现 scrollingElement 变成了那个遮罩 div，而不是你写的 .scroll-container。
- 临时验证：给遮罩层加
pointer-events: none;，看局部滚动是否恢复 - 长期解法：避免用
fixed遮罩覆盖整个滚动上下文；改用position: absolute+ 显式z-index控制层级 - 若必须用
fixed，确保它不设overflow，且不拦截touchmove事件（尤其注意轮播图、手势库等全局监听器）
局部滚动失效往往不是单一原因，而是滚动上下文、CSS 触发条件、平台限制三者叠加的结果。最易被忽略的是：你以为在操作“容器”，其实浏览器正在滚动另一个元素——务必用 DevTools 的 “Layers” 和 “Computed” 面板确认当前 scrollingElement 是谁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
