答案是需配合 white-space: nowrap 或 flex 布局才能使 overflow-x: auto 有效，因默认块级子元素会换行堆叠而不溢出；仅设 overflow: scroll 无效。
直接用 overflow-x: auto + white-space: nowrap 就能实现局部商品列表的左右滚动，不需要 JS，也不必引入轮播库。关键在父容器的尺寸控制和子项的内联布局。
为什么不能只用 overflow: scroll？
单纯加 overflow: scroll 或 overflow-x: auto 没用，因为默认块级子元素（如 <div>、<code><li>）会换行堆叠，宽度由父容器撑满，根本不会“溢出”。必须打破文档流的换行行为：
-
white-space: nowrap阻止子项换行（适用于文本或 inline 元素） - 或者把子项设为
display: inline-block/display: inline - 父容器需有明确的固定宽度（比如
width: 100%或具体像素值），且overflow-x: auto
flex 布局是更现代、更可控的方式
相比 white-space，display: flex 更可靠，尤其对图片、按钮等混合内容：
- 父容器加
display: flex和overflow-x: auto - 子项不用设
flex-shrink: 0，否则小屏下会被压缩变形 - 加
scroll-behavior: smooth让滚动更自然（支持 Chrome/Firefox/Edge） - 移动端需补
-webkit-overflow-scrolling: touch（iOS Safari 旧版必需）
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;"> <div style="flex: 0 0 auto; width: 200px;">商品1</div> <div style="flex: 0 0 auto; width: 200px;">商品2</div> <div style="flex: 0 0 auto; width: 200px;">商品3</div> </div>
滚动条样式和兼容性要注意什么？
默认滚动条丑、占空间，但隐藏它可能影响可用性：
- Chrome/Edge 可用
::-webkit-scrollbar自定义，但 Firefox 不支持 - 完全隐藏（
overflow: hidden）会导致用户无法手动拖拽，不推荐 - 如果用
touch-action: pan-y禁用横向拖拽，会直接禁掉左右滚动，慎用 - 某些安卓 WebView 对
scroll-behavior支持差，可降级为 JSelement.scrollTo()
真正容易被忽略的是：左右滚动区域必须有明确的视觉边界（比如加边框、阴影或背景色），否则用户根本意识不到可以滑动——尤其是纯卡片列表，没有箭头、没有滚动条提示时，90% 的人会直接忽略。
