横向滚动容器必须设置 overflow-x: auto，配合 overflow-y: hidden 和 white-space: nowrap；子元素需设 display: inline-block 或 inline，移动端须加 -webkit-overflow-scrolling: touch 以支持惯性滚动。
横向滚动容器必须设置 overflow-x: auto
不加这个样式，overflow-y: hidden 或 white-space: nowrap 单独用都没用。浏览器默认是 overflow: visible，内容溢出就直接撑开容器，不会出现滚动条。
关键写法：
.scroll-container {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
-
overflow-x: auto是触发横向滚动的必要条件，scroll会强制显示滚动条（即使内容没溢出） -
white-space: nowrap防止子元素换行，确保所有子项排成一行 - 别忘了给子元素设
display: inline-block或display: inline，否则nowrap不生效 - 移动端需加
-webkit-overflow-scrolling: touch，否则 iOS 上滑动卡顿
导航条子项宽度要明确，避免 flex 自动收缩
用 display: flex 做横向导航时，如果子项没设宽，flex 默认会压缩内容（尤其文字多时），导致看似“没溢出”，实际滚动失效。
- 推荐显式设置子项最小宽度：
min-width: 120px或用flex: 0 0 auto - 若用
flex: 1，所有项均分容器宽度，失去横向滚动意义 - 遇到文字过长截断：加
overflow: hidden; text-overflow: ellipsis;，但必须配合white-space: nowrap和固定宽高 - 不要依赖
flex-wrap: nowrap替代white-space: nowrap，它只控制 flex 容器内换行，不解决文本内部折行
移动端触摸滚动失效？检查 -webkit-overflow-scrolling
iOS Safari（特别是旧版本）对 overflow-x: auto 的 touch 支持很弱，手指一松就停，体验像拖拽而非惯性滑动。
立即学习“前端免费学习笔记（深入）”；
- 必须加：
-webkit-overflow-scrolling: touch - 该属性只在 iOS WebKit 内核下有效，Android Chrome 无需此设置
- 注意：该属性会让元素生成独立的层（layer），可能引发 z-index 层叠问题或闪烁，慎用于动画频繁区域
- 如仍卡顿，可尝试给容器加
will-change: scroll-position提前提示渲染引擎
滚动条样式难看？用 ::-webkit-scrollbar 定制（仅限 Chromium / Safari）
原生横向滚动条默认占空间、样式丑，且 Firefox 不支持伪元素定制，只能妥协。
- 隐藏滚动条但保留功能：
scrollbar-width: none（Firefox） +::-webkit-scrollbar { display: none }（Chrome/Safari） - 自定义宽度/颜色仅限 WebKit：
::-webkit-scrollbar,::-webkit-scrollbar-thumb - 横向滚动条对应的是
::-webkit-scrollbar-horizontal，但多数情况直接用通用伪类即可 - 注意：隐藏后用户可能找不到滚动方式，建议搭配左右箭头按钮或 hover 显示滚动条
