幻灯片不吸附的根本原因是滚动上下文未激活，必须同时满足 overflow-x: auto、scroll-snap-align 和 touch-action: pan-x 三者缺一不可。
直接给容器加 scroll-snap-type 但幻灯片不吸附？不是属性写错了，是滚动上下文根本没激活——缺 overflow-x: auto、缺 scroll-snap-align、缺 touch-action: pan-x，三者缺一不可。
滚动容器必须显式启用横向滚动上下文
浏览器只对明确设置了 overflow-x: auto（或 scroll）且有固定宽度的容器启用 snap 逻辑。常见错误是把 scroll-snap-type: x mandatory 写在 .carousel 上，却忘了它得“能滚起来”。
-
overflow-x: hidden或visible会彻底禁用吸附；overflow: auto容易误触发 y 轴吸附，不推荐 - 容器宽度必须稳定：
width: 100%比100vw更稳妥，避免 iOS Safari 因滚动条占位导致 1px 偏移 - 不能套在
transform、position: fixed或will-change: transform的父元素里，旧版 WebKit 会跳过 snap 计算 - 别用
min-width替代固定宽，内容撑宽后吸附基准就乱了
每个子项必须声明 scroll-snap-align 并防压缩
scroll-snap-type 只是开关，真正决定停在哪的是每个子项的 scroll-snap-align。不设它，再强制的 mandatory 也无效。
- 横向幻灯片统一用
scroll-snap-align: start，配合flex-direction: row和direction: ltr，最稳；center要求子项宽度严格等于容器宽度，容错率低 - 子项必须设
flex: 0 0 100%（配合父容器display: flex），比width: 100vw抗缩放、抗滚动条干扰 - 加
flex-shrink: 0防止 Flex 布局下被压缩变窄，否则总宽度不足，吸附点漂移 - 禁止用
margin分隔子项——会导致可滚动距离 ≠ 视口单位，松手后卡在两页之间
移动端必须加 touch-action: pan-x
iOS Safari 和 Android Chrome 120+ 默认拦截 touch 事件优化手势识别，不显式放开就会绕过 snap 逻辑，表现为“拖不动”“松手回弹”“滑过两页”。
- 只加
touch-action: pan-x到滚动容器上，不要写pan-x pinch-zoom，多值组合在部分 WebView 中会干扰双指缩放 -
-webkit-overflow-scrolling: touch已废弃，现代 iOS 不仅不需要，留着还可能冲突，建议删掉 - 真机测试时连 Safari Web Inspector，看 Timeline 是否触发
ScrollStart/ScrollEnd，而不是只靠视觉判断 - 若外层有吸顶导航栏（
position: sticky或fixed），确保它不遮挡滚动容器的 touch 区域
JS 控制切换必须用 scrollIntoView，别算像素
原生 scroll-snap 不响应按钮点击，JS 补位时直接赋值 scrollLeft 在高 DPI 屏、缩放页下极易失步——计算出的像素和实际 snap 点对不上。
- 改用
slideEl.scrollIntoView({ block: 'nearest', inline: 'start' })，它会尊重当前 scroll-snap 配置 - 监听
scrollend事件判断是否停稳，再决定是否下一张——这是 iOS Safari 中防止连划跳页的关键 - 自动轮播间隔要 ≥3s，否则快速手动滑动后定时器可能冲突，造成“卡半屏”
最容易被忽略的其实是滚动上下文是否真正激活：哪怕所有样式都写对了，只要祖先元素某一层有 overflow: hidden，或者容器没有显式宽度，吸附就会静默失效。真机连 Safari 开发者工具看滚动事件流，比反复改 CSS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
