能实现，但必须满足四个硬性条件：容器设scroll-snap-type、子项设scroll-snap-align、容器有明确宽高、禁用破坏overflow的属性；缺一不可，否则safari直接静默失效。
能实现，但必须满足四个硬性条件：容器设 scroll-snap-type、子项设 scroll-snap-align、容器有明确宽高、禁用破坏 overflow 的属性。缺一不可，否则 Safari 直接静默失效。
scroll-snap-type 必须写在滚动容器上，不是轮播项上
很多人把 scroll-snap-type: x mandatory 写在每张图片或 .slide 元素上，浏览器完全忽略——它只对**父级滚动容器**生效。
正确写法：
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* iOS 滚动顺滑 */
scroll-behavior: smooth;
}
错误写法（无效）：
.slide { scroll-snap-type: x mandatory; }
-
scroll-snap-type只接受滚动容器（如.carousel）作为宿主，且该容器必须可滚动（overflow-x: auto或scroll） - 移动端必须加
-webkit-overflow-scrolling: touch，否则 iOS Safari 滚动卡顿、吸附失灵 - 别用
body或html做滚动容器——iOS Safari 15+ 会静默忽略scroll-snap-type
每张轮播图必须固定宽度并禁用 flex 压缩
scroll-snap-align: start 要起作用，前提是每张图的渲染宽度严格等于容器可视区宽度。Flex 默认会压缩子项，导致吸附错位。
推荐写法：
.slide {
flex: 0 0 100%;
scroll-snap-align: start;
}
-
flex: 0 0 100%等价于flex-shrink: 0+width: 100%，确保不被压缩 - 不用
center—— 它要求子项宽度精确等于容器宽度，稍有偏差（比如 iOS 滚动条占位）就会吸附漂移 - 容器宽度建议用
width: 100%而非100vw，避免 iOS Safari 因滚动条宽度引发的 1px 偏移 - 别给容器加
transform、filter或opacity，它们会创建新层叠上下文，使overflow失效
iOS Safari 的兼容陷阱与绕过方案
iOS Safari 对 scroll-snap-type 支持有硬限制：快速滑动时可能跳过吸附点；body 上设置直接无效；某些情况下吸附延迟或不触发。
- 必须用普通
<div> 作滚动容器，不能是 <code>body或html - 加
overscroll-behavior: contain防止快速滑动时透传到父容器导致跳页 - 容器不能有
position: fixed的兄弟元素（比如吸顶导航栏），否则中断 snap 链路 - 主动跳转需用 JS 时，别调
el.scrollIntoView()，要显式传参：el.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 横向图片轮播 → 用
scroll-snap-type: x mandatory，配合display: flex; flex-direction: row - 垂直全屏翻页（如介绍页）→ 用
scroll-snap-type: y mandatory，容器设height: 100vh，每页也设height: 100vh - 别用
both—— 性能开销大，且移动端手势冲突风险高 - 如果用了
direction: rtl或flex-direction: row-reverse，start实际对齐右边缘，此时应改用end
横向轮播 vs 垂直全屏翻页：方向值怎么选
方向值不是凭感觉写 x 或 y，得看内容流和布局方式。
最易被忽略的一点：所有依赖 scroll-snap-type 的效果，在没有明确尺寸（宽/高）、没有 overflow、没有配对 scroll-snap-align 的前提下，都是“看起来写了，实际没生效”。调试时优先检查这三项是否同时满足。
