最直接方案是给有固定宽度的包裹容器设 overflow-x: auto，并配 white-space: nowrap 和 inline-block/flex 子项；推荐用 display: flex + overflow-x: auto 更可控，注意 Safari 兼容性、滚动条样式适配及移动端 touch-action 设置。
给容器加 overflow-x: auto 是最直接的方案
横向滚动本质是让内容宽度超出容器，再启用水平方向的滚动条。不能直接在 body 或 html 上设 overflow-x，否则会干扰整个页面布局；应该作用于一个明确的、有固定宽度的包裹容器。
- 确保父容器有明确宽度（比如
width: 100vw或具体像素值），且white-space: nowrap防止子元素换行 - 子元素（如
div、img、span）需设为display: inline-block或display: flex，避免块级元素自动撑满父宽 - 如果子项是图片，记得加
vertical-align: top避免底部留白导致高度异常
用 display: flex + overflow-x 更可控
Flex 布局天然适合横向排列，配合 overflow-x: auto 可以避免浮动或内联块带来的对齐和空白问题。
- 父容器设
display: flex、overflow-x: auto、scroll-behavior: smooth（可选，让滚动更顺滑） - 子项不加
flex-wrap: wrap，保持单行；必要时加flex-shrink: 0防止被压缩 - 注意 Safari 对
overflow-x: auto在 flex 容器中的兼容性：某些旧版本需要加-webkit-overflow-scrolling: touch才能支持惯性滚动
滚动条样式要适配，否则在不同系统上表现不一致
默认滚动条在 macOS、Windows、移动端差异很大，尤其 macOS 默认隐藏横向滚动条，用户可能根本看不到可滚动提示。
- 用
::-webkit-scrollbar系列伪元素定制 WebKit 内核（Chrome/Safari）的滚动条，但 Firefox 不支持 - 想全局显示横向滚动条，可以加
overflow-y: hidden配合overflow-x: auto，并用padding-bottom预留滚动条空间，避免内容抖动 - 移动端需额外测试：iOS Safari 中，
overflow-x: scroll有时需配合touch-action: pan-y才能触发横向拖拽
scrollIntoView() 和 scrollLeft 用于程序化控制滚动位置
纯 CSS 滚动只能靠手动拖拽，如果需要点击跳转、锚点定位或自动滚动到某一项，得用 JS。
- 让某个子元素可见：
element.scrollIntoView({ inline: 'start', behavior: 'smooth' }) - 精确控制滚动偏移：
container.scrollLeft = 200（注意不是scrollTop） - 监听滚动事件时，别直接在
scroll回调里改scrollLeft，否则容易触发无限循环；要用requestAnimationFrame节流或加 flag 判断
横向滚动真正难的不是加属性，而是处理跨浏览器的默认行为差异、移动端触摸响应、以及滚动过程中内容重排导致的视觉跳变。这些细节往往要靠真实设备反复验证，光看文档或本地 Chrome 测试容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
