局部导航栏水平滚动的 CSS 核心写法是 overflow-x: auto + white-space: nowrap，需同时满足容器限宽、子项不换行、允许横向溢出；常见错误是遗漏 white-space: nowrap 或 display: inline-block 导致折行。
局部导航栏水平滚动的 CSS 核心写法
局部导航栏水平滚动，不是靠 JavaScript 拖拽或轮播库，而是用原生 CSS 的 overflow-x: auto + white-space: nowrap 组合就能稳稳实现。关键在于「容器限制宽度 + 子项不换行 + 允许横向溢出」这三点必须同时满足。
常见错误是只加了 overflow-x: auto 却忘了给子元素设 display: inline-block 或 white-space: nowrap，结果子项自动折行，滚动条根本不会出现。
- 父容器（如
<nav>或<div class="nav-scroller">）必须设固定宽度（或max-width），且overflow-x: auto和overflow-y: hidden - 子项（如
<a>或<button>）推荐用display: inline-block，避免浮动带来的清除问题；或者把父容器设white-space: nowrap，子项用display: inline - 为兼容老浏览器，加
-webkit-overflow-scrolling: touch提升 iOS 滚动流畅度
移动端触摸滚动卡顿？加这三行 CSS
iOS Safari 和部分安卓 WebView 下，overflow-x: auto 容器默认没有惯性滚动，手指一抬就停，体验像“拖木头”。这不是 bug，是浏览器对非主体滚动区域的性能限制。
解决方法不是上 JS 库，而是用 WebKit 专属属性激活原生滚动惯性：
立即学习“前端免费学习笔记（深入）”；
nav.nav-scroller {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
scroll-behavior: smooth; /* 可选：让 JS 触发的 scrollTo 也平滑 */
}注意：scroll-behavior: smooth 在这里只影响脚本调用的 scrollTo()，不影响用户手动拖拽——后者是否平滑完全由 -webkit-overflow-scrolling: touch 控制。
怎么让导航项居中对齐且支持滚动？
当导航项数量不确定、又希望默认显示中间项（比如当前激活项居中），纯 CSS 很难做到。此时要放弃“居中对齐”的视觉执念，改用 JS 主动滚动定位：
- 用
element.scrollIntoView({ inline: 'center', behavior: 'smooth' })把目标导航项拉到容器中央 - 前提是容器有明确宽度、子项有固定宽度或能被准确测量；否则
inline: 'center'会计算失准 - 别用
scrollLeft手算偏移量——响应式下宽度变化会导致错位，且不兼容缩放
例如点击某个导航项后，让它在滚动容器中水平居中：
navItem.addEventListener('click', () => {
navItem.scrollIntoView({ inline: 'center', behavior: 'smooth' });
});为什么设置了 overflow-x: auto 却没滚动条？
最常踩的坑是：父容器宽度没限制，或子项用了 float / flex 但没处理换行逻辑。滚动条只在内容实际溢出容器时才出现，不是“写了就一定有”。
排查顺序建议：
- 打开浏览器开发者工具，检查父容器的 computed width 是否小于所有子项总宽度
- 确认子项没有
flex-shrink: 0以外的 flex 属性干扰（flex 容器内用overflow-x需格外小心） - 移除所有
margin或padding的意外叠加，它们可能撑宽容器导致不溢出 - 在父容器上临时加
border: 1px solid red，肉眼确认是否真被限制住了
真正可靠的水平滚动结构，永远建立在「可预测的尺寸关系」上，而不是靠浏览器猜你想要什么。
