scroll-snap-type 必须设在滚动容器上而非子元素，子元素用 scroll-snap-align 声明对齐方式；容器需显式设置 overflow 且避免 transform、flex-wrap 等干扰；mandatory 强制贴合，proximity 更松散；移动端 safari 存在兼容性问题。
scroll-snap-type 必须设在滚动容器上，不是子元素
很多人把 scroll-snap-type 写在要贴合的卡片或 section 上，结果完全无效。它只对**有滚动行为的父容器**生效，比如 div、section 或 body（需配合 overflow: auto）。子元素只需用 scroll-snap-align 声明自己想怎么对齐。
常见错误现象：scroll-snap-type: x mandatory 写在卡片上 → 滚动依旧自由，无贴合感。
- 滚动容器必须显式设置
overflow-x: auto（横向）或overflow-y: auto（纵向），且不能是visible -
scroll-snap-type的第二个参数用mandatory表示强制贴合，proximity是“靠近时才触发”，后者更松散、更适合长列表 - 若容器有
padding或border，可能干扰 snap 区域计算，建议用box-sizing: border-box
scroll-snap-align 取值影响对齐基准线
scroll-snap-align 控制单个子元素以哪条边为锚点贴合。它不决定“贴到哪儿”，而是决定“用哪条边去对齐滚动容器的 snap 位置”。例如 scroll-snap-align: start 表示用该元素的**起始边**（左/上）对齐容器的 snap line。
使用场景：横向轮播图常用 start，让每张图左边缘对齐容器左边界；垂直分页则常配 center 实现居中停靠。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
start/end/center是唯一合法值，不支持left、top等别名 - 若子元素高度不固定（如内容随屏幕变化），
center可能导致每次滚动停靠位置偏移，建议配合固定高度或min-height - 多个子元素可混合设置不同值，比如首屏用
start，中间用center，末屏用end
滚动容器需避免 transform 或 flex wrap 干扰 snap 区域
当滚动容器本身被 transform（如 scale(0.95)）或其子元素用了 flex-wrap: wrap，scroll-snap 会失效或行为异常——浏览器无法准确计算 snap 边界。
性能影响：在低性能设备上，scroll-snap 配合大量 will-change: transform 或复杂 CSS 动画时，可能出现卡顿或跳帧。
- 检查 DevTools 的 Layout 标签页，若看到 “Scroll snapping is disabled” 提示，大概率是容器有
transform或clip-path - Flex 容器中确保子元素未换行：
flex-wrap: nowrap是必需的；Grid 布局同理，需保证轨道连续不中断 - 避免在滚动容器上同时使用
contain: layout，它会隔离布局上下文，破坏 snap 计算
移动端 Safari 对 scroll-snap 的兼容性陷阱
iOS 14+ 支持完整 scroll-snap，但 Safari 旧版本（iOS 12–13）存在两个典型问题：一是 scroll-snap-type: y mandatory 在竖向滚动时可能完全不生效；二是快速滑动后容易“过冲”，停在非 snap 位置。
这不是 bug，而是 Safari 对 touchpad 和触控滚动的物理模型处理更保守，mandatory 在某些手势下会被降级为 proximity。
- 实测发现：加
-webkit-overflow-scrolling: touch能小幅改善 iOS 13 行为，但仅对overflow: auto生效，且已废弃，不推荐依赖 - 稳妥做法是用 JavaScript 回退：监听
scrollend事件（Safari 16.4+ 支持），手动scrollTo到最近 snap 点 - 不要假设所有用户都支持
scroll-snap-stop: always—— 它目前仅 Chrome/Edge 支持，Safari 完全忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
