局部左右滚动需设 overflow-x: auto 并配合 width 限制、flex 布局与 overflow-y: hidden；iOS 需 touch-action: pan-x 和 -webkit-overflow-scrolling: touch（旧版）；推荐用 scrollIntoView({ inline: 'center' }) 实现平滑定位。
局部左右滚动必须设 overflow-x: auto（不是 scroll）
只写 overflow-x: scroll 会强制显示滚动条，哪怕内容根本不够宽；而 overflow-x: auto 才是“有需要才出现”，体验更自然。很多人一上来就加 scroll，结果页面右侧多出一根空滚动条，还误以为样式没生效。
关键前提：容器必须有明确宽度限制（如 width: 300px 或 max-width: 100%），且子元素总宽度 > 容器宽度。否则浏览器判定“无需滚动”，overflow-x 直接被忽略。
- 子元素不能用
display: inline-block且未清除空白符——换行或空格会产生额外间隙，导致意外溢出 - 推荐用
display: flex+flex-wrap: nowrap控制子项横向排列，避免浮动或 inline 布局的不可控间隙 - 移动端 Safari 对
overflow-x: auto的触控惯性支持较弱，需额外加-webkit-overflow-scrolling: touch（仅 iOS 7–12，现代已不必要，但老项目仍可能遇到）
横向滚动容器里，子项不能换行也不能撑宽
常见错误是把 ul/li 或 div.card 直接丢进滚动区，却不控制其行为：默认 li 是块级、div 默认占满父宽，结果每项都独占一行，根本滚不起来。
正确做法是让所有子项“排成一横排”：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: flex和flex-wrap: nowrap - 子项设
flex: 0 0 auto（即不放大、不缩小、按内容宽）或固定width - 避免子项内有
white-space: normal的长文本自动折行——可加white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 若子项含图片，记得设
flex-shrink: 0，否则在窄屏下会被压缩变形
滚动条默认垂直，要让它水平显示就得禁掉 vertical
只设 overflow-x: auto 不够——如果容器高度不足或内容太短，浏览器仍可能同时触发 overflow-y: auto，导致出现垂直滚动条干扰视觉。必须显式关闭纵轴溢出：
-
overflow-y: hidden是最直接写法，但要注意：如果后续内容变高（比如展开折叠区），会被截断 - 更稳妥的是
overflow-y: visible+ 确保内容高度 ≤ 容器高度（靠height或max-height控制） - 不要写
overflow: auto—— 它等价于overflow-x: auto; overflow-y: auto，大概率多出一根无用的竖条 - 自定义水平滚动条样式只能用
::-webkit-scrollbar系列伪元素，Firefox/Edge 不支持，别指望跨浏览器一致
JavaScript 滚动到指定子项？用 scrollIntoView({ inline: 'center' })
点击按钮跳转到第 3 个卡片，不能只靠 scrollLeft 硬算——响应式布局下宽度会变，设备像素比不同也会偏移。原生 scrollIntoView 更可靠：
- 目标元素调用
el.scrollIntoView({ inline: 'center', behavior: 'smooth' })，inline控制水平对齐方式（'start'/'center'/'end'） - 必须确保该元素在 DOM 中已渲染，Vue/React 中若用
v-if或render条件控制，得等nextTick或useEffect后再调用 - 如果容器本身设置了
scroll-behavior: smooth，则scrollIntoView会自动继承，无需重复传behavior - IE 完全不支持
scrollIntoView的 options 参数，降级方案只能用container.scrollLeft = target.offsetLeft - container.offsetWidth / 2，但需手动处理 padding/border
真正容易被忽略的是：局部左右滚动在 iOS 上默认不支持“滑动惯性”，手指一抬就停，体验像卡顿。这不是 bug，是 Safari 的策略——必须给容器加 touch-action: pan-x，否则它会拦截横向 touchmove 事件去处理 zoom 或其他手势。
