scroll-snap-type 必须设在有明确高度和 overflow-y: scroll/auto 的块级容器上，而非 body/html；每个滚动锚点需设 scroll-snap-align（如 start），禁用 margin 分隔，推荐 min-height: 100vh；触屏问题可加 overscroll-behavior: contain 优化。
scroll-snap-type 必须设在滚动容器上，且父容器需有明确高度和 overflow-y
直接给 body 或 html 设 scroll-snap-type 基本无效——浏览器对根元素的滚动行为有特殊处理，且默认没有强制高度约束。真正起作用的是一个**有明确高度、overflow-y: scroll（或 auto）且启用滚动条的块级容器**。
常见错误是只写 scroll-snap-type: y mandatory 却忘了设 height: 100vh 和 overflow-y: scroll，结果滚动完全不吸附。
- 容器必须有
height（如100vh），不能靠内容撑开 -
overflow-y: scroll或auto缺一不可；hidden会禁用滚动，visible不触发滚动上下文 - 避免在
body上设scroll-snap-type，改用包裹层（如.scroll-container） - 触屏下若仍滑动过快或吸附失效，检查是否被
-webkit-overflow-scrolling: touch干扰（iOS Safari 旧版需此属性，但现代版本已弃用，留着反而可能冲突）
每个滚动锚点（section）必须设 scroll-snap-align，且不能依赖 margin/padding 拉开间距
scroll-snap-align 是让元素“告诉”容器“我该在哪对齐”的关键。只设容器的 scroll-snap-type 不够，每个可停驻的区块（比如每页 section）都得显式声明对齐方式。
最常用的是 scroll-snap-align: start（顶部对齐），适用于全屏垂直滚动；若想居中停驻，用 center，但需确保容器高度与元素高度匹配，否则可能错位。
- 必须为每个
section设置scroll-snap-align: start（或center），不能只靠父容器驱动 - 不要用
margin-bottom分隔 section——这会导致实际滚动距离不等于视口高度，吸附位置偏移；改用min-height: 100vh+box-sizing: border-box - 若 section 内容超长导致自身高度 >
100vh，scroll-snap-align: start仍只锚定顶部，用户可能看到“半截页面”，此时应加overflow: hidden或限制内容高度
触屏滑动卡顿或跳过页面？检查 scroll-behavior 和 overscroll-behavior
原生 scroll-snap 在 iOS Safari 和部分 Android WebView 中存在惯性滚动过强、吸附被跳过的现象，不是 bug，而是滚动引擎优先保障“流畅感”而弱化了吸附精度。
scroll-behavior: smooth 对 snap 无实质帮助，反而可能干扰原生吸附节奏；真正有用的是 overscroll-behavior: contain，它能阻止滚动穿透到父容器（比如防止滚到底还触发下拉刷新或页面回弹）。
- 在滚动容器上设
overscroll-behavior: contain，可显著提升触屏吸附稳定性 - 避免同时使用
scroll-behavior: smooth和scroll-snap-type，二者混合易导致动画延迟或吸附失效 - Android Chrome 需开启
chrome://flags/#smooth-scrolling（默认开启），但某些定制 ROM 可能关闭，无法通过 CSS 控制 - 真机测试时，用
touch-action: pan-y禁用横向拖拽，防止误触发水平滚动干扰垂直吸附
兼容性兜底：scroll-snap 不支持时如何降级为 JS 方案
IE 完全不支持，iOS Safari scroll-snap-align: center 支持不稳，部分安卓低端机滚动事件节流严重——纯 CSS 方案无法覆盖全部场景。
降级核心逻辑是监听 scroll 事件，计算当前滚动位置最接近哪个 section.offsetTop，然后用 element.scrollIntoView({ behavior: 'smooth' }) 强制对齐。但要注意：频繁调用 scrollIntoView 会造成抖动，必须加节流。
- 用
getBoundingClientRect().top替代scrollTop计算，更准确（不受父容器滚动影响） - 节流间隔建议 ≥ 60ms，避免 iOS WebKit 的 scroll 事件丢失
- 检测支持性：
'scrollSnapType' in document.documentElement.style，比查 UA 更可靠 - 若项目已用第三方库（如 fullPage.js），注意其内部滚动逻辑可能与
scroll-snap冲突，建议非必要不混用
scroll-snap 的坑不在语法，而在它和底层滚动引擎的耦合太深——同一段 CSS，在 Safari 模拟器里完美，在真机上差 20px，这种偏差几乎无法完全消除，只能靠容器尺寸控制、锚点边界收敛和触控参数微调来逼近稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
