scroll-snap-type必须写在滚动容器上而非子元素，且容器需满足100dvh/100vw、overflow为auto/scroll、内容总高度大于容器高度三条件；子元素须为直接子项、尺寸严格一致、scroll-snap-align成对设置。
scroll-snap-type写在子元素上就失效
90% 的定位不准，是因为把 scroll-snap-type 错误加在了 .slide、section 或 li 这类子元素上。它只对滚动容器本身生效——比如一个设置了 overflow-y: auto 的 div.scroll-container，或者全页滚动时的 html 元素。
DevTools 里能看到声明，但 computed styles 中 scroll-snap-type 显示为空或 none，就是写错位置的明确信号。
- ✅ 正确：给容器设
scroll-snap-type: y mandatory - ❌ 错误：给
.item设scroll-snap-type - ⚠️ 特殊情况：TikTok 风格全页滚动必须用
html作容器，且需height: 100dvh+overflow-y: auto
容器不满足三个硬性条件
即使样式全对，只要缺以下任一条件，scroll-snap 就完全不触发：
-
height: 100dvh（垂直）或width: 100vw（水平）——100dvh比100vh更稳，避免 iOS Safari 地址栏收缩导致高度跳变 -
overflow-y: auto或overflow-y: scroll——不能是hidden；慎用scroll，部分 Android WebView 兼容差 - 内容总高度 > 容器高度——仅靠
height: 100dvh不够，必须有多个子项叠加超出，否则无滚动可捕获
scroll-snap-align没成对设置或作用对象错误
scroll-snap-align 只对滚动容器的**直接子元素**生效，中间多套一层 div 就会失效。而且单写一个值（如 scroll-snap-align: center）是无效的，浏览器会整条忽略。
- ✅ 垂直吸附顶部：
scroll-snap-align: start start（简写为start） - ✅ 横向轮播居中：
scroll-snap-align: center center（不能省略第二个center） - ✅ 所有子项尺寸必须严格一致——用
min-height: 100dvh，别用height: 100vh+padding模拟居中 - ⚠️ 避免嵌套在
position: sticky或含transform的父容器里，会破坏吸附逻辑
iOS Safari 的 mandatory 并不真正“强制”
快速滑动后松手，Safari 可能停在两个吸附点之间——这不是 bug，是 WebKit 对滚动惯性的主动妥协，尤其当子项高度不一致时更明显。
真机测试不可省略，仅靠模拟器或桌面 Safari 判断会误判。
- 确保所有子元素高度/宽度严格一致（
flex-shrink: 0+ 固定宽高） - 必要时监听
scrollend事件做 JS 修正（注意：旧版 Safari 不支持） - 不要依赖
scroll-margin-top负值来偏移吸附点——规范不支持负值，会被忽略；改用绝对定位辅助元素方案
scroll-snap-type 是否生效，再逐项核对容器尺寸、溢出设置和子项结构。最常被忽略的是“内容必须真实可滚动”这一条——光有样式不够，得有物理滚动距离。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
