scroll-snap在移动端失效主因是滚动容器未“激活”：必须同时满足width/height固定（如100vw/100vh）、overflow-x:auto或overflow-y:scroll、scroll-snap-type设于容器而非body/html，且子项需设scroll-snap-align:start并加touch-action:pan-x。
scroll-snap 在移动端滑块中失效，90% 是因为容器没“活”起来——不是属性写错了，而是根本没被浏览器识别为可吸附滚动上下文。
滚动容器必须同时满足三个硬性条件
浏览器只对同时具备以下三点的容器启用 scroll snap 吸附逻辑：
-
width: 100vw或height: 100vh（必须是固定尺寸，min-width/min-height不行，也不能靠内容撑开） -
overflow-x: auto（横向滑块）或overflow-y: scroll（纵向）——overflow: hidden或visible会彻底禁用吸附 -
scroll-snap-type: x mandatory（横向）或y mandatory（纵向），且必须写在该容器上，不能写在body或html
常见错误：把 scroll-snap-type 加在 body 上，再套一层 .slider；此时滚动仍是根元素行为，CSS scroll snap 完全不介入。
子项必须声明 scroll-snap-align 并防压缩
scroll-snap-align 是子项“主动申报停靠位置”的关键，父容器的 scroll-snap-type 只是开关，没它等于没通电。
- 横向滑块统一用
scroll-snap-align: start（左对齐），别用center——除非你严格控制了容器宽度与子项宽度比 - 子项宽度必须稳定：
flex: 0 0 100%（配合display: flex父容器）比width: 100vw更抗缩放、滚动条占位和 padding 干扰 - 加
flex-shrink: 0防止 Flex 布局下被压缩变窄，导致总宽度失准 - 禁止用
margin-right分隔子项——会导致可滚动距离 ≠ 视口宽度，松手后卡在两页之间；改用padding-right或负外边距抵消
移动端必须显式设置 touch-action: pan-x
iOS Safari 和 Android Chrome 120+ 默认拦截 touch 事件以优化手势识别，不放开就会绕过 scroll snap 逻辑。
- 横向滑块容器必须加
touch-action: pan-x - 纵向全屏滚动用
touch-action: pan-y - 不要写
pan-x pinch-zoom等多值组合——部分 WebView 会因此干扰双指缩放，导致滑动卡顿 -
-webkit-overflow-scrolling: touch已废弃，现代 iOS 不仅不需要，留着还可能冲突，建议删掉
真机测试时，连 Safari Web Inspector 看 Timeline 是否触发 ScrollStart/ScrollEnd，而不是只靠视觉判断是否“吸附”。
JS 控制切换时别手动算 scrollLeft
直接赋值 container.scrollLeft = x 在高 DPI 屏、缩放页面或 Safari 下极易失步——计算出的像素和实际 snap 点对不上。
- 改用
slideEl.scrollIntoView({ block: 'nearest', inline: 'start' })，它会尊重当前 scroll snap 配置 - 监听
scrollend（Chrome 112+、Safari 16.4+ 支持）做补偿，比监听scroll更可靠 - 旧版降级用
IntersectionObserver，rootMargin设为'0px 0px -50% 0px'提升触发精度
最常被忽略的是：容器父层用了 transform、will-change: transform 或 position: fixed ——旧版 WebKit 会跳过 snap 计算，吸附直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
