scroll-snap 实现精准吸附的前提是盒模型稳定：scroll-snap-align 仅对直接子元素生效，依赖其未受 margin/padding/transform 干扰的盒边界；scroll-snap-type 必须设在满足尺寸、overflow 和内容溢出三条件的可滚动容器上，iOS Safari 中 mandatory 非绝对强制，需真机测试并确保子元素高度一致。
scroll-snap 能实现精准吸附，但前提是盒模型本身不“漂移”——scroll-snap-align 的行为完全依赖子元素的盒模型边界，而 margin、padding、transform 或非直接子结构都会让它失效。
scroll-snap-align 只认直接子元素的盒边界
它不是“居中显示”，而是把子元素某个锚点（如 start、center、end）对齐到容器视口边界。但这个锚点必须真实存在且未被干扰：
-
scroll-snap-align: center要求子元素尺寸严格一致，否则吸附位置会偏移；推荐统一用min-height: 100dvh替代height: 100vh，避免 iOS Safari 地址栏收缩导致高度跳变 - 如果子元素外层套了
div（比如.slide > .inner），scroll-snap-align写在.inner上就完全无效——它只对滚动容器的**直接子元素**生效 -
scroll-snap-align: end依赖元素右/下边缘，但若子元素有margin-right或父容器有padding，吸附点就会错位；调试时优先清掉所有默认边距
scroll-snap-type 必须写在可滚动容器上，且满足三个硬条件
写错位置是失效最常见原因：DevTools 显示声明存在，但 computed styles 中 scroll-snap-type 为空，基本就是加在了子元素上。
- 必须加在设置了
overflow-x: auto或overflow-y: auto的容器上，不能加在.slide、section等子元素上 - 容器需同时满足：尺寸（
width: 100vw或height: 100dvh）、可滚动（overflow不能是hidden）、内容总宽/高 > 容器宽/高（即真能滚） - 水平轮播用
scroll-snap-type: x mandatory；全屏垂直滚动用scroll-snap-type: y mandatory；mandatory才能强制停靠，proximity在快速滑动时可能不触发
iOS Safari 的 mandatory 并不真正“强制”
真机测试会发现：快速滑动后松手，Safari 常停在两个吸附点之间——这不是 bug，是 WebKit 对滚动惯性的妥协，尤其当子元素高度不一致或嵌套了 position: sticky 时更明显。
- 确保所有直接子元素高度完全一致（
min-height: 100dvh+box-sizing: border-box） - 避免在含
transform的父容器里嵌套 scroll-snap 区域 - 必要时监听
scrollend事件做 JS 补偿（注意旧版 Safari 不支持该事件）
真正难的不是写对那几行 CSS，而是让盒模型“干净”——没有隐式 margin、没有中间 wrapper、没有动态 height 计算，所有尺寸都由 CSS 显式控制。一旦盒模型漂了，scroll-snap-align 就像拿尺子去量一根晃动的线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
