scroll-snap-type 必须与 scroll-snap-align 配合使用，且容器需满足滚动前提（如设置高度、overflow）才生效；mandatory 强制吸附，proximity 仅就近吸附；scroll-margin、box-sizing 等细节影响吸附精度。
scroll-snap-type 单独写在容器上不会产生任何吸附效果，必须配合子元素的 scroll-snap-align 才能生效；而且容器得真正能滚动——没溢出、没高度、没 overflow，就等于白配。
scroll-snap-type 和 scroll-snap-align 必须成对出现
很多人把 scroll-snap-type: y mandatory 写在滚动容器（比如 .section-container）上就以为完事了，结果滚动如常，毫无停顿感。这是因为浏览器根本不知道“该吸到哪”。scroll-snap-align 才是告诉每个子元素“以哪个边为锚点去贴容器边缘”。
-
scroll-snap-align: start表示该子元素**顶部**对齐容器顶部（y 方向）或**左侧**对齐容器左侧（x 方向） -
scroll-snap-align: center是最常用也最自然的选项，但要求所有子元素高度/宽度一致，且容器有固定尺寸 -
scroll-snap-align: end依赖元素自身盒模型底部/右边界，容易因margin或padding偏移，调试时优先清掉默认边距
容器必须满足滚动前提，否则 scroll snap 彻底失效
再准的 scroll-snap-align 也救不了一个“不能滚”的容器。常见失效场景：
- 容器没设
height或max-height，子元素总高小于容器——没有溢出，overflow-y: auto不触发滚动条，也就没有 snap 行为 - 用了
overflow: hidden：既不能滚，又不吸附 - 用了
overflow: scroll：macOS 下强制显示滚动条，视觉干扰大；应改用auto - 父容器是
display: flex但没设flex-direction: column+overflow-y: auto：flex 容器默认不形成块级滚动流，snap 不识别
mandatory 和 proximity 的实际表现差异很大
scroll-snap-type 第二个参数不是可有可无的修饰词，它直接决定滚动体验是否可控：
-
mandatory：滚动最终一定会停在一个 snap point 上，哪怕用户轻扫也会被拉回。Safari 支持最稳，适合全屏分页、轮播等强节奏场景 -
proximity：只在滚动停止位置离某个 snap point 足够近时才吸附，更宽松，但 Chrome/Firefox 有时响应迟钝，尤其在长列表中容易“跳过”中间项 - iOS Safari 对
mandatory的触控惯性处理较好，但快速连划仍可能跳过某一项——加scroll-behavior: smooth可缓解
调试时最容易忽略的三个干扰点
吸附位置偏移（比如卡在标题下方而不是顶部）、吸附点错位、动态增删后吸附失效，往往不是属性写错了，而是这些细节在捣鬼：
-
scroll-margin没设：若子元素有上边距，scroll-snap-align: start会把 margin 顶边当锚点，导致内容实际露出一段空白；建议统一加scroll-margin-top: 0 -
box-sizing不是border-box：padding 和 border 会额外撑开元素，影响 snap 点计算 - 高频切换
scroll-snap-type值（比如根据屏幕尺寸 JS 动态改）：可能引发重排、吸附点错位，真要响应式，优先用媒体查询写死 CSS，而非 JS 操作
真正难的不是写出那几行 CSS，而是让每个子元素的盒模型干净、容器滚动上下文明确、吸附强度匹配真实交互意图——这三者缺一，scroll-snap-type 就只是个好看的装饰属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
