幻灯片不吸附的根本原因是滚动上下文未激活，必须同时满足 overflow-x: auto、scroll-snap-align 和 touch-action: pan-x 三者缺一不可。
直接给容器加 scroll-snap-type 但幻灯片不吸附？不是属性写错了，是滚动上下文根本没激活——缺 overflow-x: auto、缺 scroll-snap-align、缺 touch-action，三者缺一不可。
滚动容器必须显式启用横向滚动上下文
很多人把 scroll-snap-type: x mandatory 写在 .carousel 上却忘了它得“能滚起来”。浏览器只对明确设置了 overflow-x: auto（或 scroll）且有固定宽度的容器启用 snap 逻辑。
-
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 屏、缩放页面或 Safari 下极易失步——计算出的像素和实际 snap 点对不上。
- 用
slideEl.scrollIntoView({ block: 'nearest', inline: 'start' })，它会尊重当前scroll-snap配置，天然兼容 - 按钮绑定
element.scrollBy({ left: window.innerWidth, behavior: 'smooth' })，禁止加preventDefault，否则 Safari 会中断吸附 -
scroll-snap-stop: always加在每个子项上，防止快速拖拽滑过两页；Firefox 支持有限，别依赖它做关键逻辑 - 避免在子项上同时设
margin和scroll-snap-align，Safari 可能将margin纳入吸附基准，造成偏移
最易被忽略的是：iOS Safari 对 body 或 html 上的 scroll-snap-type 静默忽略，必须用普通 div 包裹，且该容器不能有 transform、filter 等创建新层叠上下文的属性——否则 overflow 失效，幻灯片全露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
