可行，但需满足“可滚动+可吸附”双重前提：容器设overflow-x:auto+display:flex+-webkit-overflow-scrolling:touch，每个tab项设scroll-snap-align:start且加touch-action:pan-x，避免align-items:center等干扰布局。
scroll-snap-type 在移动端做滑动标签页（类似头条“推荐/热点/视频”横向 tab 切换）是可行的，但直接套用桌面写法几乎必失败——核心问题不是属性写错，而是滚动容器没满足“可滚动 + 可吸附”的双重前提。
为什么加了 scroll-snap-type: x mandatory 还是滑不过去？
常见现象：手指一划，tab 栏直接滑出视口，松手后不吸附、不定位、甚至卡在中间。根本原因有三个：
- 父容器缺少
overflow-x: auto或scroll，仅靠display: flex+white-space: nowrap不构成可滚动上下文 - 每个 tab 项没设
scroll-snap-align: start，光有容器设置无效 - iOS Safari 和部分安卓 WebView 默认禁用 touch 滚动下的 snap 响应，必须显式加
touch-action: pan-x
最小可靠配置（iOS 17+ / Android Chrome 120+ 实测生效）
以下组合缺一不可：
- 滚动容器必须设
display: flex+overflow-x: auto+-webkit-overflow-scrolling: touch（iOS 平滑滚动关键） - 加
scroll-behavior: smooth提升惯性滚动体验，但别依赖它替代 snap - 每个 tab 项固定宽度（如
flex: 0 0 120px），且必须设scroll-snap-align: start - 必须加
touch-action: pan-x，否则 iOS 会拦截 touch 事件，导致 snap 失效
容易被忽略的布局干扰点
即使配置全对，也可能因以下细节失效：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
margin或padding，导致实际可滚动区域偏移，scroll-snap-align: start对不准起始位置 - tab 项用了
transform（比如 hover 缩放）、或父容器设了align-items: center，会破坏 scroll-snap 的对齐基准线 - 滚动容器是
或<header></header>等语义化标签，Safari 会忽略其上的scroll-snap-type，务必包裹一层<div class="tabs-scroll"> <li>没限制 tab 容器高度，导致内容撑高后触发垂直滚动，干扰水平 snap 行为</li> <p>真正卡住人的从来不是属性名记不牢，而是 <code>touch-action: pan-x忘加、scroll-snap-align没配到子项、或者 flex 容器里混了align-items: stretch这种默认行为——这些地方一错，整个吸附就静默失效，连报错都没有。
