移动端Tab栏横向滚动的CSS核心思路是让容器可滚动、子项不换行且激活项始终居中，需父容器设scroll-snap-type:x mandatory、overflow-x:auto、white-space:nowrap，子项设scroll-snap-align:center和flex:0 0 auto，并配合JS调用scrollIntoView实现自动滚动定位。
移动端Tab栏横向滚动的CSS核心思路
关键不在“滚动”本身，而在让容器可滚动、子项不换行、且激活项始终居中——这需要 scroll-behavior + scroll-snap-align 配合容器尺寸控制，而不是靠 JS 计算偏移量。
纯 CSS 方案可行，但必须满足：父容器设固定宽高、overflow-x: auto、子项用 scroll-snap-align: center，且所有子项宽度一致（或至少视觉上对齐）。
为什么 scroll-snap-type: x mandatory 必须加在父容器上
不加这句，scroll-snap-align: center 在子项上完全无效；加了但设成 proximity，则滚动停止位置不可控，激活项大概率偏左/偏右。
常见错误是只加了子项的 scroll-snap-align，却忘了给父容器加 scroll-snap-type，结果滚动如常，但“居中停靠”毫无反应。
- 父容器必须设
scroll-snap-type: x mandatory - 父容器需设
overflow-x: auto且white-space: nowrap（防子项折行） - 子项需设
scroll-snap-align: center和flex: 0 0 auto（避免 flex 压缩破坏居中） - 为兼容 iOS Safari，建议加
-webkit-overflow-scrolling: touch
激活项自动居中的两个硬性前提
所谓“自动居中”，其实是滚动到对应 Tab 后，浏览器强制将它对齐到容器可视区中心。但这只在以下条件同时满足时才可靠：
- 所有 Tab 宽度一致（比如都设
width: 120px或flex: 0 0 120px），否则scroll-snap-align: center的参考点会漂移 - 父容器宽度不能是百分比或
fit-content，必须是固定值（如360px）或100vw，否则 snap 区域计算失准 - 激活时需调用
element.scrollIntoView({ block: 'nearest', inline: 'center' })，仅靠 CSS 无法触发滚动定位
也就是说：CSS 负责“停靠能力”，JS 负责“触发滚动”。漏掉 JS 这步，点击 Tab 不会自动滑动过去。
iOS 上滚动卡顿或 snap 失效的典型修复
iOS Safari 对 scroll-snap 支持较弱，尤其在容器有 transform、opacity 或父级有 overflow: hidden 时，snap 会静默失效。
- 确保 Tab 容器没有
transform、filter等合成层干扰属性 - 父级不能有
overflow: hidden（哪怕只是视觉遮罩），会截断 scroll-snap 行为 - 给容器加
will-change: scroll-position可提升 iOS 下的响应速度 - 如果仍不生效，降级方案：用
scrollLeft手动计算并赋值，配合requestAnimationFrame平滑过渡
真正难的不是写出来，而是让 scroll-snap 在各种 iOS 版本里稳定触发——这点连 Chrome DevTools 的 Rendering 面板都未必能准确模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
