scroll-snap-type必须写在产生滚动行为的父容器（如.scroll-container）上，而非子元素（如.slide或section）；该容器需满足：块级、显式高度（如height: 400px）、overflow-y: auto/scroll、内容总高度溢出、子元素为直接子级。
scroll-snap-type 必须写在局部滚动容器上，不是子元素
局部滚动吸附失效的头号原因：把 scroll-snap-type: y mandatory 写在了 .slide 或 section 上。它只对**产生滚动行为的父容器**生效，比如一个设置了 overflow-y: auto 和固定高度的 div.scroll-container。
常见错误现象：DevTools 里能看到样式声明，但 computed styles 中 scroll-snap-type 是空值或 none——这就是写错位置的铁证。
- 正确结构：
scroll-snap-type只加在.scroll-container - 容器必须是块级、有明确尺寸（如
height: 400px或max-height: 60vh） - 不能用
body或html作为局部滚动容器；它们属于全局滚动上下文
局部容器需同时满足三个硬性条件
缺一不可，否则 scroll-snap 完全静默：
-
overflow-y: auto或overflow-y: scroll（禁用hidden，慎用scroll，部分 Android WebView 不兼容） - 内容总高度 > 容器高度（仅设
height: 400px不够，必须有多个.slide叠加溢出） - 子元素（
.slide）必须是该容器的**直接子元素**；嵌套一层div.wrapper就会断掉吸附
性能提示：若容器内含大量 DOM 或复杂动画，频繁触发 snap 会增加合成层开销，滚动可能卡顿。
scroll-snap-align 的取值决定吸附基准点
它不是“居中显示”，而是指定子元素哪一部分贴住容器视口边界：
-
scroll-snap-align: start→ 子元素**顶部**对齐容器顶部（最常用，适合分节页） -
scroll-snap-align: center→ 子元素**中心**对齐容器中心（适合横向轮播、卡片居中） -
scroll-snap-align: end→ 子元素**底部**对齐容器底部（极少单独使用）
注意：margin 和 padding 会参与对齐计算，易导致视觉偏移。建议统一设 box-sizing: border-box 并清空默认边距。
不要混用 start 和 end 在同一容器的不同子项里——行为不可预测，Firefox 尤其敏感。
iOS Safari 和 Firefox 的吸附偏差必须真机验证
scroll-snap-type: y mandatory 在 iOS Safari 上并不真正“强制”：快速滑动后松手，可能停在两个吸附点之间。这不是 bug，是 WebKit 对滚动惯性的主动妥协，尤其当子元素高度不一致时更明显。
- 确保所有
.slide高度严格一致（如都用height: 100%或固定400px，避免min-height） - 避免在
position: sticky或含transform的父容器里嵌套该滚动容器 - Firefox 下若出现位置偏移，优先改用
display: block布局，避开inline-flex或grid（尤其是带align-items: center的） - 测试唯一可信依据：松手后是否真的停在区块边界——不是 DevTools 样式面板，也不是模拟器表现
局部滚动吸附最易被忽略的点，是把容器当成“透明背景”而忽视它的滚动上下文职责。它不是装饰层，而是 snap 行为的唯一仲裁者；一旦尺寸、溢出、子元素层级三者任一失配，整个机制就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
