scroll-snap-type 失效的根本原因是容器缺失三重约束：必须有明确宽高、启用 overflow 滚动、子项尺寸固定且不换行；三者缺一不可，否则浏览器直接忽略该属性。
scroll-snap-type 为什么在移动端左右滑动选择器里经常失效
根本原因不是写法错，而是容器缺失关键约束：必须同时满足「有明确宽度/高度」「启用滚动（overflow）」「内部子项有固定尺寸且不换行」。三者缺一不可，否则 scroll-snap-type 直接被浏览器忽略——连 devtools 的 computed 面板里都看不到生效痕迹。
常见掉坑点：
-
overflow-x: auto写在父容器，但子项用了flex-wrap: wrap或width: fit-content，导致实际滚动容器高度/宽度塌陷 - 父容器用
display: flex但没设flex-shrink: 0，子项被压缩后 snap 对齐基准偏移 - 在 iOS Safari 上，必须加
-webkit-overflow-scrolling: touch才能触发惯性滚动和 snap 行为
左右滑动选择器的最小可行 HTML + CSS 结构
不用框架、不依赖 JS，纯 CSS 实现可滑动选项卡式选择器，核心就这四行样式：
.selector {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* iOS 必加 */
}
<p>.selector > <em> {
flex: 0 0 100%; /</em> 关键：禁止缩放 + 单项占满容器宽 */
scroll-snap-align: start;
}注意：flex: 0 0 100% 比 width: 100% 更可靠，它能防止子项因内容撑大或 margin 干扰而破坏对齐精度；scroll-snap-align: start 对应 scroll-snap-type: x mandatory，方向必须一致。
立即学习“前端免费学习笔记（深入）”；
如何让滑动停靠更顺滑、更可控
原生 scroll-snap 默认是“硬停”，用户快速拖拽后容易停不准，尤其在低性能设备上。加两行过渡可显著改善体验：
- 给容器加
scroll-behavior: smooth（注意：只对 JSscrollTo()生效，不影响手势滑动） - 真正影响手势滑动停靠的是
scroll-snap-stop: always（Chrome 99+ / Safari 15.4+ 支持），加在子项上，强制每次滑动只停一个 snap 点 - 若需支持旧版 Safari，得用
touch-action: pan-x防止误触发双指缩放，同时避免和scroll-snap冲突
示例子项样式：
.selector > .option {
scroll-snap-align: start;
scroll-snap-stop: always;
touch-action: pan-x;
}怎么知道当前选中了哪个选项？纯 CSS 做不到，但可以低成本联动
scroll-snap 本身不提供“当前激活项”状态，CSS 无法监听滚动停止事件。必须配合极简 JS 获取视觉对齐项：
- 监听容器的
scroll事件（别用scrollend，兼容性差） - 用
element.scrollLeft除以单个子项宽度（建议缓存），四舍五入取整得到索引 - 给对应子项加
aria-current="true"或自定义 class，供 CSS 样式区分（比如高亮边框、字体加粗） - 避免频繁重排：用
requestAnimationFrame节流，且只在滚动停止约 100ms 后才更新状态
这个 JS 通常不超过 15 行，比引入轮播库轻量得多，也比纯 CSS “伪选中”（如 :focus-visible）更可靠。
最易被忽略的一点：所有子项的尺寸必须严格一致，哪怕只是 1px 差异，scroll-snap-align 就可能对不齐——这不是 bug，是规范要求对齐基准必须明确。
