最轻量左右滑动菜单用 overflow-x: auto 实现，关键设 white-space: nowrap、flex-shrink: 0、scroll-snap-type: x mandatory 与 scroll-snap-align: start，并适配触控与响应式断点。
用 overflow-x: auto 实现基础左右滑动菜单
响应式左右滑动菜单最轻量的实现方式，就是让容器水平可滚动，不依赖 JavaScript。关键在于控制子项不换行、容器设为固定高度并隐藏垂直溢出。
常见错误是忘记设置 white-space: nowrap 或漏掉 scroll-behavior: smooth，导致滑动生硬或文字折行破坏布局。
-
display: flex容器 +flex-wrap: nowrap（默认即如此，但显式声明更稳妥） - 所有菜单项设为
flex-shrink: 0，防止被压缩 - 容器加
overflow-x: auto和overflow-y: hidden - 移动端建议加
-webkit-overflow-scrolling: touch提升滚动流畅度
用 CSS Scroll Snap 做对齐停靠
纯滚动容易停在半途，用户需要“吸附式”体验——每滑一次就精准对齐一个菜单项。这靠 scroll-snap-type 和 scroll-snap-align 就能搞定。
注意：必须父容器设 scroll-snap-type: x mandatory，子项设 scroll-snap-align: start；若用 center 对齐，需确保容器宽度与子项宽度匹配，否则会偏移。
- 父容器加
scroll-snap-type: x mandatory（proximity更宽松但不够可靠） - 每个菜单项加
scroll-snap-align: start（配合flex布局时推荐） - 避免在子项上设
margin，它会干扰 snap 位置；改用gap或内边距 - Safari 15.4+ 才完全支持
mandatory，旧版降级为普通滚动即可
用 transform: translateX() + touchmove 手动拖拽（无滚动条）
当设计要求隐藏滚动条、支持惯性拖拽、或需要自定义回弹逻辑时，就得接管触摸事件。核心是监听 touchstart/touchmove，计算位移并用 transform 更新位置。
容易踩的坑是未禁用默认行为（e.preventDefault()），导致页面误触发缩放或上下滚动；还有未做边界限制，拖过头后松手直接飞走。
- 记录
touchstart的clientX，在touchmove中算差值deltaX - 用
transform: translateX(${offset + deltaX}px)实时更新，别用left（重排） -
touchend时根据速度和剩余距离判断是否回弹或切换到下一项 - 必须给容器加
touch-action: pan-y，禁用横向原生滚动
响应式断点与触控适配要点
桌面端鼠标悬停、移动端触摸操作、小屏竖屏空间受限——这些场景不能共用一套交互逻辑。真正的响应式不是只调字体大小，而是切换交互模式。
最容易被忽略的是：PC 上用 hover 展开二级菜单，但在触摸设备上没有 hover 状态，必须提供显式点击入口；另外 iOS Safari 的 scroll-behavior: smooth 在某些版本中无效，得用 scrollTo({ behavior: 'smooth' }) 补充。
- 用
@media (hover: hover) and (pointer: fine)区分精细指针设备（如鼠标） - 小屏（
max-width: 480px）建议关闭 scroll snap，改用单页全宽菜单 + 点击切换 - 给菜单项加
user-select: none，避免长按误触发文本选择 - 测试真机触控延迟：iOS 上
touchstart到touchmove可能有 ~300ms 延迟，需用passive: false显式声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
