侧滑删除组件用 scroll-snap 实现的关键是让容器滑动后强制停在正常态与删除态之间，需设置 overflow-x: auto、子项总宽＞容器宽（如 200vw）、scroll-snap-type: x mandatory、scroll-snap-align: end、flex: 0 0 200%、touch-action: pan-x 及 scroll-snap-stop: always。
侧滑删除组件用 scroll-snap 实现，核心不是“滑出”，而是“让容器在滑动后强制停在两个状态之间”：正常态（内容居中）和删除态（删除按钮完全露出）。这要求滚动容器必须严格控制宽度、禁用弹性压缩、并精准定义吸附点。
为什么 scroll-snap-type 加了但左右滑不动？
根本不是属性写错，是容器没被浏览器识别为「可横向滚动的吸附上下文」：
- 父容器必须设
overflow-x: auto（hidden或visible都不触发 scroll snap） - 子项总宽度必须 > 容器宽度——例如单个卡片含内容区 + 删除按钮，总宽至少是
200vw（100vw 正常内容 + 100vw 删除区），否则浏览器判定“无需滚动”，直接忽略所有 snap 行为 - 不能用
display: flex+flex-wrap: wrap或width: fit-content，这会让子项高度/宽度塌陷，导致滚动区域失效 - iOS Safari 必须加
-webkit-overflow-scrolling: touch，否则 touch 滚动不激活 snap 计算
scroll-snap-align: end 才能对齐删除按钮右边缘
侧滑删除的关键视觉锚点是“删除按钮完全可见”，不是卡片左对齐或居中。所以子项不能用 start 或 center：
-
scroll-snap-align: end表示该子项的右边界对齐滚动容器右边界——当用户向左滑动时，容器右边缘刚好卡在删除按钮最右端 - 必须配合
scroll-snap-type: x mandatory（方向与overflow-x一致） - 子项需设
flex: 0 0 200%或width: 200vw，确保内容区 + 删除区共同构成一个完整滚动单元，且不被 flex 压缩 - 禁用
transform和position: absolute，它们会干扰浏览器对“右边界”的计算，导致吸附偏移
移动端 touch 滑动跳帧、松手后停不准？
这不是性能问题，是手势滚动未被正确约束：
立即学习“前端免费学习笔记（深入）”；
- 必须给滚动容器加
touch-action: pan-x，否则 iOS/Android 可能拦截 touch 事件，绕过 snap 逻辑 -
scroll-behavior: smooth对手势无效，只影响 JS 的scrollTo()；真正起作用的是scroll-snap-stop: always（Chrome 99+ / Safari 15.4+），加在子项上，强制每次滑动只停一个 snap 点 - 避免外层套
position: fixed或will-change: transform，旧版 WebKit 会跳过 snap 边界检测 - 删除按钮区域建议用
padding-right+background模拟，而非绝对定位，防止因渲染时机导致右边界计算失准
最难调的从来不是那几行 CSS，而是理解 scroll-snap-align: end 的“end”究竟指哪个盒模型的 end——它依赖于子项的 border-box 右缘，而这个右缘会被 margin 折叠、line-height 影响 inline 元素高度、甚至滚动条占位悄悄移动。任何一处隐式尺寸坍缩，都会让删除按钮露不全或露太多。
