scroll-snap-type必须设在滚动容器上，且需配合overflow-x:auto、-webkit-overflow-scrolling:touch、scroll-snap-align:center/start及固定子项宽度，禁用preventdefault()和transform缩放以确保ios safari吸附精准。
scroll-snap-type 必须设在滚动容器上，且需配合 overflow-x
很多人把 scroll-snap-type 加在轮播图最外层 div 上却没效果，其实是漏掉了关键前提：它只对**设置了非 visible 横向溢出的父容器**生效。手机端轮播必须用 overflow-x: auto（不能是 scroll 或 hidden），同时启用 -webkit-overflow-scrolling: touch 才能触发原生惯性滚动。
常见错误现象：scroll-snap-align 写了但滑动停不住、滑过头、或完全不吸附。这时候先检查父容器是否同时满足：
-
display: flex或display: inline-block（子项需块级布局） -
overflow-x: auto+scroll-snap-type: x mandatory -
-webkit-overflow-scrolling: touch（iOS Safari 必加） - 子项设置
scroll-snap-align: center或start
子项宽度必须严格固定，不能依赖 flex: 1 或 max-content
移动端视口宽度多变，如果轮播项用 flex: 1 或 width: 100vw，在 Safari 中容易因缩放、地址栏隐藏导致宽度计算偏差，scroll-snap-align 失效。正确做法是用精确像素或 calc(100vw - 2 * var(--gap)) 配合已知间隙。
推荐写法：
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.carousel-item {
flex: 0 0 calc(100vw - 32px); /* 减去左右 padding */
scroll-snap-align: center;
width: calc(100vw - 32px);
}
注意：不要用 100% 或 100vw 直接设在子项上——Safari 对 viewport 单位在滚动上下文中的解析不稳定。
必须禁用默认 touchmove 行为，否则 scroll-snap 被拦截
很多轮播库或手写逻辑会在 touchstart 里调用 preventDefault()，这会直接阻止浏览器原生滚动，scroll-snap 彻底失效。只要你想用原生滚动+吸附，就不能在根滚动容器上阻止默认行为。
如果你需要自定义拖拽逻辑（比如显示拖拽反馈），只能监听但不阻止，改用 passive: true 的事件监听器：
carouselEl.addEventListener('touchstart', () => {
// 不要在这里调用 preventDefault()
}, { passive: true });
真正需要干预的时机是 scroll 事件后做状态同步（如更新指示点），而不是在触摸起点就劫持滚动。
iOS Safari 下 snap 位置偏移？检查是否有 transform 或 scale 缩放
一旦父容器或 body 应用了 transform: scale(0.9)、zoom 或 meta viewport 的 initial-scale 非 1，iOS 会错误计算 scroll-snap-align 的锚点位置，导致吸附到错误坐标。
排查步骤：
- 临时移除所有
transform、scale、zoom样式 - 确认
<meta name="viewport">中没有initial-scale或user-scalable=no - 用 Safari 开发者工具检查元素 computed styles 中的
scroll-snap-align是否被计算为center而非none
这个坑在混合使用 rem 布局和动态 viewport 缩放时特别隐蔽，往往只在 iPhone 某些系统版本下复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
