CSS scroll snap 怎么做横向卡片滑动：scroll-snap-stop、触摸手势与键盘验收

横向商品卡、教程步骤和图片画廊常见一个小毛病：手指一甩，容器直接跨过两三张卡；轻轻拖动时又停在半张卡的位置。CSS Scroll Snap 能把停靠点交给浏览器，但真正决定体验的不是单独写一行 scroll-snap-type，而是容器、卡片、留白和快速滚动策略一起验收。

先把横向滑动的停靠问题说清楚

CSS Scroll Snap 不是开箱即用的轮播组件，也不会替你绘制左右翻页按钮。它只在滚动动作结束后，根据滚动容器的 snap port 和子项的 snap position 选择一个停靠点锁定滚动位置。卡片本身尺寸可变、容器顶部带固定标题栏或页面左右预留边距时，停靠位置都需要单独校准。

最小可用写法：容器、卡片和边缘留白三件套

先让容器真的能横向滚动，再让每张卡把自己的起点声明为 snap 对齐点。scroll-padding-inline 用来照顾页面内侧留白，避免第一张和最后一张卡贴住屏幕边缘。

.card-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-inline: 20px;
  scroll-padding-inline: 20px;
  scroll-snap-type: inline proximity;
  overscroll-behavior-inline: contain;
}

.card-rail > article {
  flex: 0 0 min(82vw, 320px);
  scroll-snap-align: start;
}

这里的 82vw 是体验取舍，不是固定答案：它要让下一张卡露出一小截，给用户一个“还能继续滑”的视觉提示。若卡片需要完整占据视口，可以把宽度改成 100%，但要重新检查左右 padding 和焦点滚动。

旧写法为什么会被快速甩动穿透

很多实现只写 scroll-snap-type: x mandatory，然后发现触控板或手机快速甩动时仍会跨过候选停靠点。这并不矛盾：mandatory 规定最终要落在某个 snap position，却不等于每一个中间位置都必须经过。是否允许跨过候选点，要看卡片上的 scroll-snap-stop。

normal 允许浏览器根据滚动惯性跳过位置；always 则要求不能跨过一个可能的停靠点。它适合“每一步都要看到”的 onboarding 或分步说明，不宜一股脑给长列表的每张卡加上，否则用户会觉得滚轮被拽住。

用代码对比两种滚动策略

/* 自由浏览：允许快速跨卡 */
.browse-rail {
  scroll-snap-type: inline proximity;
}
.browse-rail > * {
  scroll-snap-stop: normal;
}

/* 分步引导：每一步都停下来 */
.steps-rail {
  scroll-snap-type: inline mandatory;
}
.steps-rail > * {
  scroll-snap-stop: always;
}

不要把两种策略混成“越强越好”。商品推荐、新闻卡片和图片画廊通常要保证快速找到目标，proximity + normal 更自然；安装向导、横向教学步骤或必须逐项确认的流程，才有理由使用 mandatory + always。

键盘焦点和触摸手势要分开验收

鼠标拖动顺滑不代表键盘可用。给卡片内按钮连续按 Tab，观察浏览器是否把焦点滚到可见区域；如果卡片被脚本包裹，别用 outline: none 隐掉焦点样式。对可聚焦元素调用 element.focus() 后，还要检查它与 scroll-padding-inline 是否冲突。

• 触摸：慢拖、快速甩动、反向甩动各测一次，记录是否跳过了必须完整展示的卡片。
• 鼠标：滚轮横向滚动和 Shift+纵向滚轮都测，确认外层页面不会被意外带动滚动。
• 键盘：Tab、Shift+Tab 和 Enter 都测，焦点不能落在视口外的卡片上。
• 窄屏：在 320px 到 390px 宽度下检查第一张和最后一张卡，不能被 padding 裁掉内容。

兼容与降级：把 CSS 当增强层

Scroll Snap 已经是成熟能力，但组件仍应在没有 snap 的环境里保持可滚动。不要把卡片位置锁死在 JavaScript 的 scrollLeft 计算上；原生横向滚动本身就是可接受的降级。只有在确实需要分页指示器时，才监听滚动并做轻量状态同步，避免每一帧强行写布局。

同时检查 scroll-snap-type 与 scroll-snap-stop 的实际支持情况。功能检测只能说明属性能被解析，不能代替真实触摸验收；尤其是浏览器、触控板和系统级惯性滚动的组合，最终体验可能不同。

常见问题：横向卡片为什么还是停不准

必须使用 mandatory 才能一张卡一张卡停下吗？

不一定。先用 proximity 看自然滚动是否已经满足目标；只有停靠一致性是硬要求时才升级到 mandatory，并重新检查内容高度和键盘焦点。

scroll-snap-stop: always 会不会让滚动很卡？

会有这种可能，特别是长列表或触控板快速甩动。把它限制在分步流程的卡片上，普通浏览卡片保留 normal，通常更平衡。

为什么设置了 snap 却完全不生效？

先检查容器是否有明确的横向溢出、子项是否有 scroll-snap-align，以及实际滚动的元素是不是你设置样式的那个元素。很多问题来自把属性写在了外层 wrapper 上。

采用建议：先选滚动意图，再选强度

如果目标是让用户浏览一排可跳过的卡片，从 inline proximity、scroll-snap-align: start 和 scroll-snap-stop: normal 开始；如果目标是让用户逐步确认内容，再考虑 mandatory 与 always。最后把触摸、滚轮、键盘和窄屏四组结果写进验收记录，CSS 的几行声明才算真正落地。