scroll-snap容器和子项必须满足：scroll-snap-type写在实际滚动容器（如）上；容器需height:100vh且overflow-y:scroll；子项须scroll-snap-align:start且高度严格为100vh、无溢出。
只用 scroll-snap 无法自动高亮楼层导航点——它只控制滚动停靠位置，不触发任何状态变化；高亮必须由 JavaScript 驱动，且不能依赖 scroll 事件监听 scrollTop。
scroll-snap 容器和子项必须满足哪些硬性条件？
很多页面写了 scroll-snap-type: y mandatory 却没效果，根本原因是容器或子项不满足底层约束：
-
scroll-snap-type必须写在**实际滚动的容器**上（如），不是body或html（除非它们被设为可滚动） - 该容器必须有明确高度（如
height: 100vh）且overflow-y: scroll（hidden或auto不可靠） - 每个目标区块（如
）需设scroll-snap-align: start，且自身高度不能被margin/padding/border撑破容器 - Firefox 对
mandatory更严格：若某区块高度
为什么不能用 window.onscroll + getBoundingClientRect() 判断高亮？
scroll 事件在 scroll-snap 场景下完全不可信：浏览器可能跳过中间帧、加速滑动、甚至截断滚动过程，导致 scrollTop 值滞后或突变。
- 快速滑动时，
scrollTop可能从 200 直接跳到 800，错过中间所有判断点 -
getBoundingClientRect().top在有固定头部、line-height 不一致、或用了scroll-margin-top的标题上极不准 - 手动节流（如
throttle(32)）会让高亮延迟半秒以上，用户已滚到下一页，上一页按钮还在亮
用 IntersectionObserver 同步高亮的正确姿势
这是目前唯一稳定、轻量、原生支持的方案，核心是监听“哪一页真正进入了视口”，而非猜滚动位置。
- 给每个
设置scroll-margin-top: 60px（值 = 固定头部高度），否则scrollIntoView会把标题顶到视口最顶被遮住 - 创建
IntersectionObserver，threshold: 0.6（60% 可见才触发），避免快速滑动时频繁切换 - 观察回调里不要直接操作 DOM 类名，用
requestIdleCallback批量更新，否则影响滚动流畅性 - 映射关系要提前建好：如
{ "about": "#sidebar-about", "contact": "#sidebar-contact" }，避免运行时查 DOM
侧边栏导航本身也要防坑
position: fixed 让侧边栏始终可见，但它的存在会干扰 scroll-snap 的计算逻辑：
- 别把侧边栏放在
scroll-snap容器内部，否则它会被当成一个“吸附项”，破坏分页节奏 - 如果侧边栏有动画（如
transition: opacity 0.3s），确保高亮类添加后不会因重排导致布局抖动 - 移动端小屏慎用
scroll-snap-type: y mandatory，用户可能想局部滚动看长内容，强制吸附反而反人类；可用媒体查询降级为proximity
真正难的不是写对那几行 scroll-snap CSS，而是让 JS 高亮逻辑和浏览器原生滚动行为不打架——IntersectionObserver 是桥梁，但阈值、scroll-margin-top、批量更新时机，三者缺一都会让高亮飘忽或卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
