移动端左右滑动导航栏能用纯css实现，但需确保父容器有明确宽度、子项设flex: 0 0 auto禁用收缩、white-space: nowrap加在父容器上，并正确配置scroll-snap和滚动条隐藏方式。
移动端左右滑动导航栏能用纯 CSS 实现，但直接写 overflow-x: auto 和 white-space: nowrap 很大概率失效——不是语法错，而是子项被压缩、容器没约束、滚动机制被拦截这三处出了问题。
为什么 overflow-x: auto 加了却不能滑动
常见现象：真机上点不动、拖两下才动、完全无反应。根本原因不是浏览器不支持，而是 Flex 子项默认 flex-shrink: 1，会主动缩小自己填满父宽，导致内容“刚好塞下”，浏览器判定无溢出，滚动就挂了。
- 父容器必须有明确宽度（比如
width: 100%或max-width: 400px），不能是width: fit-content或未设宽的 flex item - 每个子项要禁用收缩：
flex: 0 0 auto（比单写flex-shrink: 0更稳妥，避免受其他 flex 属性干扰） -
white-space: nowrap要加在父容器上，主要防子项内联文本换行导致高度突变，也辅助 inline 类型子项不折行 - 别用
display: inline-flex—— Safari 某些版本下scroll-behavior: smooth会失效
如何隐藏滚动条又保持可滚动
滚动条在移动端视觉上多余，但删掉它不能影响原生滚动行为。关键不是“隐藏”，而是“不干扰”：
- 用
::-webkit-scrollbar { display: none; }可以隐藏 WebKit 内核滚动条（iOS / Android Chrome） - 不要用
overflow: hidden或overflow-x: hidden—— 这会彻底禁用滚动 - 慎用
touch-action: none：如果加在导航容器上，原生横向滚动会被完全封死 - 若子项含
button或带onclick的元素，建议加touch-action: manipulation，减少点击延迟
scroll-snap 对齐不生效怎么办
想让每次滑动都停在某个卡片左边缘或中心？scroll-snap 很好用，但依赖三个硬性条件：
- 父容器必须设
scroll-snap-type: x mandatory，且方向与overflow-x一致 - 父容器要有显式块级尺寸（
width或inline-size），不能靠内容撑开 - 每个子项必须设
scroll-snap-align: start（左对齐）或center（居中），不能是默认的none - 子项不能用
flex: 1或width: 100%—— 否则所有项都占满容器，失去滑动意义 - 移动端建议加
scroll-behavior: smooth，但注意旧版 iOS Safari 不支持
移动端滑动卡顿或响应迟钝的硬伤
样式写对了，但体验还是差，往往卡在底层交互逻辑上：
- 在
.menu上监听了pointerdown却没调event.preventDefault()→ 滚动事件被阻断 - 用了
transform（比如transform: translateZ(0)）触发硬件加速，但忘了加will-change: scroll-position或contain: strict，反而引发重绘抖动 - 子项里有
input或textarea，焦点获取时 iOS 会强制重置滚动位置 - 滚动区域嵌套太深，或外层有
position: fixed且未加-webkit-overflow-scrolling: touch，iOS 惯性滚动会丢失
真正卡住的从来不是 overflow-x 本身，而是 flex 布局下子项是否真的“撑开了”容器、滚动是否被 JS 事件意外拦截、以及硬件加速和 scroll-snap 的配合是否到位。这些地方一松动，整个滑动体验就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
