轮播不吸附是因为滚动容器未启用可滚动上下文：需设置 overflow-x:auto（横向）或 overflow-y:scroll（纵向）、height:100vh、scroll-snap-align（子项）、禁用 transform/fixed 等干扰属性。
scroll-snap-type 加了但轮播不吸附？不是写错了，是滚动容器根本没“活”起来——缺 overflow、缺 scroll-snap-align、缺 touch-action。
滚动容器必须显式启用可滚动上下文
浏览器只对明确设置了 overflow-x: auto（横向）或 overflow-y: scroll（纵向）且有固定尺寸的容器启用 scroll snap。直接写在 body 或 html 上基本无效，因为根元素滚动行为被 UA 样式和系统策略限制。
-
height: 100vh（或width: 100vw）必须存在，不能靠内容撑高 -
overflow-x: auto是硬性要求；overflow: hidden或visible会彻底禁用 snap - 避免用
min-width/min-height替代固定宽高，否则内容超长时破坏吸附基准 - 容器不能有
transform、will-change: transform或position: fixed，旧版 WebKit 会跳过 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分隔子项——会导致实际可滚动距离 ≠ 视口单位，吸附点偏移
移动端 touch 滚动必须加 touch-action
iOS Safari 和 Android Chrome 120+ 默认拦截 touch 事件以优化手势识别，不显式放开就会绕过 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-type配置，自动对齐到最近有效点 - 监听
scrollend事件判断切换完成（Chrome/Safari 支持；Firefox 需 fallback 到setTimeout+getBoundingClientRect()轮询） - 箭头点击时，别查索引再算 offset，直接调用目标
<section></section>的scrollIntoView() - 确保每个子项有稳定 DOM 引用，避免用
querySelectorAll动态查导致索引错乱
真正难的不是凑齐那几行 CSS，而是 layout 尺寸、touch 事件流、JS 控制节奏三者在所有设备上达成一致——任何一个环节的像素误差或事件拦截，都会让 snap “看起来像没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
