移动端横向滑动菜单平滑滚动不可靠，因iOS Safari≤15.3不支持、微信X5常静默降级、系统偏好prefers-reduced-motion会禁用；须CSS声明scroll-behavior: smooth于滚动容器，JS调用scrollIntoView并运行时检测兜底。
移动端横向滑动菜单用 display: flex + overflow-x: auto 就能跑通，但“平滑滚动”不能只靠 scroll-behavior: smooth —— 它在 iOS Safari ≤15.3 完全无效，微信 X5 WebView 常静默降级，必须 JS 主动调用 + 运行时检测兜底。
为什么 scroll-behavior: smooth 在移动端基本不可靠
写了却没动画，不是 CSS 写错了，而是浏览器根本没执行：
-
scroll-behavior: smooth必须写在**实际滚动容器**上（比如.menu-container { overflow-x: auto; scroll-behavior: smooth; }），写在html或body上对局部滚动无效 - iOS Safari 15.4 之前完全不支持；15.4–16.0 支持但极不稳定，常卡顿或静默失败
- 微信 Android WebView 默认禁用平滑滚动，需初始化时调用
webSettings.setSmoothScrollingEnabled(true) - 用户开启系统偏好
prefers-reduced-motion: reduce，浏览器会强制禁用所有平滑行为且不报错
正确启用平滑滚动的实操路径
CSS 只做基础声明，JS 才是主力：
- 容器必须同时满足：
overflow-x: auto+ 明确宽度（如width: 100%）+scroll-behavior: smooth（留着，不依赖但也不删） - 点击跳转到某菜单项时，不用锚点，改用
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }) - 若菜单是动态渲染（如 Vue/React），调用前包一层
requestAnimationFrame，确保 DOM 已挂载、offsetLeft不为 0 - 检测是否可用：
typeof Element.prototype.scrollIntoView === 'function'+ 实际调用后监听scroll事件是否连续触发
Flex 布局本身要先稳住，否则平滑无从谈起
很多“滚动不平滑”的问题，其实是布局先崩了：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
flex-wrap: nowrap，漏写会导致小屏下换行，overflow-x失效 - 子项必须设
flex-shrink: 0（或flex: none），否则被压缩后宽度失真，scrollIntoView计算位置偏移 - iOS 滚不动？补上
-webkit-overflow-scrolling: touch（iOS 15+ 可省略，但留着更稳） - 容器不能有
transform、filter或will-change，这些会干扰合成层，导致滚动掉帧甚至平滑中断
首尾难点击 + 滚不到头？padding 和 snap 要配好
用户手指滑过第一个/最后一个菜单项，本质是触控区不足：
- 给容器加
padding-inline: 16px，让内容“浮”进可视区，而非紧贴边缘 - 若用
scroll-snap-type: x mandatory，每个子项必须显式设scroll-snap-align: start，否则松手后 snap 错位 -
scroll-snap-align: center看起来居中，但点击跳转仍需 JS 配合scrollIntoView，不能只靠 CSS
真正麻烦的不是“怎么让它滚”，而是“怎么让它每次都能滚到头、点得准、不抽风”——flex-shrink: 0、flex-wrap: nowrap、-webkit-overflow-scrolling: touch 这三个点漏掉任何一个，都会在真机上露出马脚；而平滑滚动，永远是 JS 主导、CSS 辅助、运行时兜底的组合拳。
