最可靠方案是给容器设 overflow-x: auto、white-space: nowrap、overflow-y: hidden 和 -webkit-overflow-scrolling: touch，子元素用 display: inline-block 或 inline 且不换行。
用 overflow-x: auto 实现容器内横向滚动
直接给容器加 overflow-x: auto，再确保子元素总宽度超过容器——这是最常用也最可靠的方案。关键不是“怎么让内容滑动”，而是“怎么不让它换行+撑开宽度”。
- 必须设置容器
white-space: nowrap，否则 inline 元素（比如<span></span>、<a></a>）会自动折行，宽度压不上去 - 子元素要设
display: inline-block或display: inline，不能是默认块级（如<div>），否则每个都独占一行 <li>移动端需加 <code>-webkit-overflow-scrolling: touch，否则 iOS 上滑动卡顿或根本没惯性 - 别忘了隐藏垂直滚动条：加
overflow-y: hidden，不然可能意外出现双滚动条
<div class="scroll-container">
<span class="item">选项1</span>
<span class="item">选项2</span>
<span class="item">选项3</span>
<span class="item">选项4</span>
</div>
<style>
.scroll-container {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.item {
display: inline-block;
padding: 8px 16px;
margin-right: 8px;
background: #f0f0f0;
}
</style>
Flex 布局下横向滚动失效？检查 flex-wrap 和 min-width
用 display: flex 做横向排列时，overflow-x: auto 容易失效——常见原因是 flex 容器默认收缩子项，或者子项被强制换行。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须显式设
flex-wrap: nowrap，否则多项目时可能折成多行，宽度无法超限 - 子项加
flex: 0 0 auto（即不放大、不缩小、按内容宽），避免 flex 主动压缩 - 某些浏览器对 flex 容器的 overflow 处理不一致，可给子项加
min-width: 0防止文本溢出破坏布局 - 如果子项是图片或带固定宽高的组件，确认没被父级
max-width或width截断
鼠标滚轮横向滚动不生效？补上 scroll-behavior 和 CSS 适配
默认情况下，鼠标中键滚轮是垂直滚动；想支持水平方向，得靠 CSS 拦截并重定向，而不是 JS 监听事件——更轻量、兼容性更好。
- 给滚动容器加
scroll-behavior: smooth提升体验，但不是必需 - 关键在
@media (hover: hover)下用scroll-snap-type或scroll-snap-align做吸附时，要小心和横向滚动冲突 - 桌面端用户习惯用 Shift + 滚轮横向滚动，这个行为由浏览器原生支持，无需 JS；但前提是容器本身已具备横向滚动能力（即上面两条已配好）
- 不要用
onwheel手动阻止事件再调scrollLeft，容易抖动、吞事件、破坏屏幕阅读器支持
移动端 touch 滑动卡顿或跳变？避开 transform 和重排陷阱
在 iOS Safari 或部分安卓 WebView 中，横向滚动突然卡住或滑过头，大概率是触发了非合成层渲染，或者 JS 干预了滚动时机。
- 避免给滚动容器设
transform（如translateZ(0)），它会让浏览器创建新图层，反而干扰原生滚动优化 - 别在
scroll事件里频繁读取scrollLeft，这会强制同步计算布局，导致掉帧；改用getBoundingClientRect()或IntersectionObserver做节流判断 - 如果用了
position: sticky或backdrop-filter，它们可能禁用滚动优化，临时去掉测试是否恢复流畅 - 真要 JS 控制（比如拖拽滚动），优先用
touch-action: pan-x告诉浏览器“只允许横向拖拽”，减少手势冲突
