根本原因是滚动容器与遮挡元素缺乏层叠控制或空间预留；应优先用 scroll-margin-top 解决局部锚点对齐，改用 flex 布局避免 fixed 遮挡滚动条，移除 transform/will-change 并确保高度链完整以修复 iOS 卡顿。
局部滚动内容被遮挡，根本原因不是“没加 overflow”，而是滚动容器与遮挡元素（如 fixed 导航栏、悬浮 footer、弹层）之间缺乏明确的层叠控制或空间预留。直接加 z-index 或 padding 往往无效，甚至引发新问题。
为什么 overflow-y: auto 的滚动区内容会被盖住
常见于两种典型结构：
- 使用
position: fixed的导航栏 +main内部设overflow-y: auto—— 此时main滚动条虽可见，但其顶部内容在滚动后仍可能被 fixed 元素覆盖； - 左侧固定栏（如菜单）用
flex布局 +overflow-y: auto，但高度继承链断裂（例如height: 100%没能真正撑满），导致滚动区域实际高度不足，底部内容被截断或无法触达。
关键点：遮挡 ≠ 层级错乱，更常是「可视区域未对齐」或「滚动容器尺寸计算错误」。
scroll-margin-top 比 scroll-padding-top 更适合局部滚动容器
当遮挡发生在某个具体滚动容器（比如一个 div.sidebar）内部，而非整个页面锚点跳转时，scroll-padding-top 作用于 html 无效——它只影响根滚动容器的锚点对齐行为。
立即学习“前端免费学习笔记（深入）”；
此时应改用 scroll-margin-top，直接设置在目标子元素上：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.sidebar {
overflow-y: auto;
height: 400px;
}
.sidebar .nav-item {
scroll-margin-top: 60px; /* 匹配 sidebar 内部 fixed header 高度 */
}
这样，当调用 .nav-item.scrollIntoView() 时，浏览器会自动把该元素顶部对齐到滚动容器可视区向上偏移 60px 的位置，避开容器内固定头。
- 必须确保目标元素在滚动容器内，且该容器有明确高度和
overflow-y: auto|scroll； -
scroll-margin-top值建议用 px 或 rem，避免用百分比（计算基准不明确）； - 旧版 Safari（iOS 15.3 及之前）不支持，可用
@supports (scroll-margin-top: 1px)安全包裹。
fixed 元素遮挡局部滚动条本身怎么办
如果 fixed 导航栏不仅盖内容，还直接盖住了 main 或 .sidebar 右侧的滚动条（尤其 Windows 系统），说明布局模型已出问题：
- 不要给
body设overflow: hidden后再靠 JS 控制——这会破坏可访问性，且移动端 touch 滚动仍可能穿透； - 放弃
position: fixed是最干净的解法：把导航栏改为普通流内元素，用flex布局约束其位置； - 示例结构：
body { display: flex; flex-direction: column; height: 100dvh; }，nav为第一个子项，main { flex: 1; overflow-y: auto; }—— 滚动条属于main自身，自然位于其右边界，完全不受nav影响。
注意：若必须保留 position: fixed（如兼容极老系统），则需手动给滚动容器加 padding-right（值 ≈ 滚动条宽度），但这在 macOS 上不可靠，因滚动条默认隐藏。
移动端 Safari 中局部滚动卡顿或失效
局部滚动容器在 iOS Safari 上容易出现「滚动突然停止」「touchmove 被吞」「无法触发 scroll 事件」等问题，核心原因是：
- 容器设置了
transform或will-change，干扰了原生滚动合成层； - 监听了
touchmove并调用了preventDefault()—— 这会彻底禁用该区域所有滚动，包括局部滚动； - 容器父级用了
overflow: hidden但未设明确高度，导致 Safari 无法正确判断可滚动范围。
实操建议：
- 移除局部滚动容器及其任意祖先上的
transform和will-change，除非真有性能收益； - 绝对不要在局部滚动容器上监听
touchmove并preventDefault()； - 用
scroll事件 +requestAnimationFrame做边界检测，比依赖wheel更可靠（Safari 对wheel支持有限）； - 确认容器高度链完整：推荐用
100dvh替代100vh，避免地址栏展开/收起时高度突变。
最易被忽略的一点：局部滚动容器的 scroll-behavior: smooth 必须显式写在该容器上，不会从父级继承；且一旦容器内有 position: sticky 元素，smooth 滚动可能被中断——这是 Safari 的已知限制，暂无完美绕过方案。
