横向滚动导航的本质是通过 overflow-x: auto 配合 white-space: nowrap、inline-block 子项及显式宽度控制盒模型行为，避免换行与垂直滚动；需慎用 scrollIntoView，注意 flex-shrink 和兼容性陷阱。
用 overflow-x: auto 实现横向滚动容器
横向滚动导航的本质，是让一个固定高度/宽度的容器内部内容超出时可拖动查看，而不是换行或溢出隐藏。关键不是“加个滚动条”，而是控制容器的盒模型行为。
常见错误是只写 overflow: auto 却没限制容器宽度，结果触发的是垂直滚动；或者忘了禁用换行，导致子项被挤到下一行，失去横向布局基础。
- 容器必须设
white-space: nowrap，防止<span>或<a>类内联元素自动折行 - 子项（如导航项）推荐用
display: inline-block或display: inline-flex，避免浮动或 Flex 布局引发的意外换行 - 容器需显式设置
width（如100%）和overflow-x: auto，同时加overflow-y: hidden防止意外纵轴滚动 - 为提升手感，可加
-webkit-overflow-scrolling: touch（iOS Safari 专用）
<div class="nav-scroller"> <a href="#">首页</a> <a href="#">产品</a> <a href="#">文档</a> <a href="#">API</a> <a href="#">定价</a> </div>
.nav-scroller {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller > a {
display: inline-block;
padding: 8px 16px;
margin-right: 8px;
}
移动端慎用 scrollIntoView 自动定位
很多方案在点击导航项后调用 element.scrollIntoView({ inline: 'center' })，想让选中项居中。但实际中容易卡顿、跳动，尤其在 iOS Safari 上表现不稳定。
根本原因是：滚动容器本身不是 body，而 scrollIntoView 默认作用于顶层滚动上下文；且多次快速点击可能触发冲突滚动。
立即学习“前端免费学习笔记（深入）”；
- 若必须自动定位，优先对容器调用
scrollLeft计算偏移量，而非依赖scrollIntoView - 注意子项宽度可能因字体渲染、缩放比例变化，建议用
getBoundingClientRect()动态读取位置 - 加
requestAnimationFrame节流，避免连续点击造成滚动队列堆积
Flex 容器 + overflow-x 的兼容性陷阱
有人用 display: flex 替代 inline-block，看起来更现代，但会踩坑：Flex 默认 flex-wrap: nowrap 是对的，但子项若没设 flex-shrink: 0，在空间不足时会被强制压缩，文字被截断或图标变形。
- Flex 方案必须给每个导航项加
flex: 0 0 auto（即不伸展、不收缩、按内容宽） - 老版本 Android WebView（≤4.4）不支持
overflow-x在 Flex 容器上的正确表现，建议降级为inline-block方案 - 若用
gap控制间距，在 Safari ≤15.4 中需用margin替代
滚动条样式要不要隐藏？
多数 UI 设计要求“无感滚动”，即不显示原生滚动条。但直接用 overflow: hidden 会彻底禁用滚动能力，必须用伪元素覆盖。
- Chrome/Edge：用
::-webkit-scrollbar { display: none } - Firefox：用
scrollbar-width: none - 注意：隐藏后用户可能意识不到可滚动，尤其在桌面端无 hover 提示时。建议保留轻微视觉线索（如末尾渐隐遮罩或箭头图标）
- 不要用 JavaScript 模拟滚动条——增加复杂度且无障碍支持差
横向滚动导航最难的从来不是“怎么让它动起来”，而是“怎么让它动得自然、稳、不抢焦点、不破坏语义”。特别是当导航项含图标+文字、响应式缩放、或嵌套在第三方组件里时，white-space 和 flex-shrink 这两个属性最容易被忽略，一漏就全乱。
