要让页面只滚动局部内容，关键在于严格隔离可滚动区域：局部容器需设固定高度（height/max-height）和overflow-y: auto，父级用flex布局并确保html/body为100%高度，header/footer设固定高和flex-shrink: 0，main设flex: 1和overflow: auto；锚点需拦截并手动计算容器内偏移 scrollto；内容替换后须用requestanimationframe恢复scrolltop，并校验scrollheight与clientheight。
要让页面只滚动局部内容，关键不是“禁掉全局滚动”，而是把可滚动区域严格隔离出来——其他部分必须不参与滚动上下文，且局部容器自身满足滚动前提。
给局部容器设 height + overflow-y: auto
没有固定高度的 div 即使写了 overflow-y: auto，scrollTop 也永远是 0，滚动完全无效。浏览器只对“有明确可视边界”的容器启用滚动能力。
- 高度必须是
height或max-height（推荐用px、vh或rem），不能靠min-height或内容撑开 - 别只写
overflow: auto——它可能意外触发水平滚动；显式写overflow-y: auto更可控 - 如果容器是 Flex 子项，加
flex-shrink: 0防止被压缩塌陷 - 父级若用了
transform、perspective或filter，会创建新层叠上下文，导致子元素offsetTop失准
用 flex 布局隔离中间区域滚动
想让 header / main / footer 结构中仅 main 滚动，不能靠 body 滚动来“模拟”，必须用 flex 把滚动上下文锁死在 main 内部。
-
html和body必须设height: 100%，否则flex: 1无法生效 -
header和footer要设明确高度（如60px）并加flex-shrink: 0 -
main设flex: 1和overflow: auto（不是scroll，避免空滚动条） - 避免在
main里用position: fixed或transform，它们会截断滚动上下文
阻止锚点链接误触整页滚动
点击 <a href="#section-a"></a> 默认会滚整个页面，必须拦截并重定向到局部容器，否则局部滚动形同虚设。
- 给链接加
event.preventDefault()，再手动计算目标在容器内的偏移 - 用
target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop获取准确位置 - 调用
container.scrollTo({ top: pos, behavior: 'smooth' })，不是target.scrollIntoView() - 务必先校验
container.contains(target)，防止目标不在该容器内却强行滚动
局部滚动后保持位置不丢失
JS 替换局部容器内容（如 innerHTML = newHtml）会导致 scrollTop 重置为 0，这不是 bug，是 DOM 重建的自然行为——得在渲染完成后再恢复。
- 替换前存
container.scrollTop到变量或sessionStorage - 新内容插入后，用
requestAnimationFrame(() => { container.scrollTop = savedPos; })恢复 - 别用
setTimeout(() => {}, 0)，它不保证 layout 已完成 - 恢复前检查
container.scrollHeight > container.clientHeight，否则scrollTop赋值会被忽略
最容易被忽略的是：局部滚动容器一旦嵌套在 transform 或 iframe 中，滚动事件坐标和高度计算就会失真，此时必须用 getBoundingClientRect() 替代所有基于 offsetTop 的判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
