局部滚动容器必须显式设置height或max-height并配合overflow-y:auto才生效，仅写overflow-y:auto不触发滚动；flex布局中需父容器设flex-column且子项设flex:1；移动端需加overscroll-behavior:contain等兼容处理。
局部滚动容器必须显式设 height + overflow-y
只写 overflow-y: auto 不生效，是常见错觉。浏览器无法自动推断“该滚多高”，尤其当父容器没给明确高度时，overflow 会退化为 visible，内容直接溢出、遮挡或错位。
正确做法是：在局部滚动区域（比如 .card-body 或 .sidebar-content）上同时设置：
-
height或max-height（不能依赖min-height） -
overflow-y: auto（或scroll，但auto更稳妥） - 若用
flex布局，确保父容器设了display: flex; flex-direction: column;，且该区域设flex: 1代替固定 height
例如：
.chat-messages { height: calc(100vh - 200px); overflow-y: auto; }比单纯 overflow-y: auto 稳定得多，尤其在 Safari 和旧版 Android WebView 中。禁用全局滚动时，html/body 的 height 必须同步设为 100%
很多人加了 overflow: hidden 却发现页面塌陷、内容被裁、右侧留白——问题就出在没配 height: 100%。
html 和 body 默认是 height: auto，一旦你设 overflow: hidden，它们就不再随内容撑高，但又没给明确高度，结果视口内可用空间归零，子元素定位、100vh 计算全乱套。
务必一起写：
html, body { height: 100%; overflow-x: hidden; overflow-y: hidden; }
注意：如果用了 box-sizing: border-box 或有 margin/padding，要确认 computed height 真的是 100%，否则局部滚动区的 calc(100vh - Xpx) 会偏移。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
fixed 元素与局部滚动共存时，top 值必须对齐真实头部高度
侧边栏或顶部导航用了 position: fixed，但局部内容区一滚动就盖住头部、或底部截断——大概率是 top 写死了 0 或凭感觉填了个值。
实际必须用开发者工具看 .header 的 computed height（含 border/padding），然后：
- fixed 侧边栏设
top: 48px（假设 header 高 48px） - 内容区设
margin-top: 48px或padding-top: 48px，再套height: calc(100vh - 48px) - 避免用
top: 50px这类估算值；不同设备、缩放、字体渲染下，真实高度可能差 1–2px
否则滚动时 fixed 元素和内容区错位，尤其在 iOS Safari 中更明显。
移动端下 overscroll-behavior 和 pointer-events 容易被忽略
iOS Safari 滚动到顶/底时默认有弹性回弹，会干扰局部滚动体验；手指在局部容器里下拉，还可能误触发整个页面滚动。
加这两行能大幅收敛异常行为：
.scrollable-area { overscroll-behavior: contain; }<br>.pull-to-refresh { pointer-events: none; }
注意：overscroll-behavior 在 iOS Safari 13+ 才稳定支持，旧版需 fallback 到监听 touchmove + preventDefault()；pointer-events: none 是为了防止下拉刷新层拦截后续点击，但加载图标本身得设回 pointer-events: auto。
真正卡住布局的，往往不是 overflow 属性本身，而是 height 计算链断裂、fixed 定位锚点漂移、或者移动端滚动根节点没统一。这些地方一松，局部滚动就变成“局部错位”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
