横向滚动条应限制在商品容器内而非全局：需设容器明确宽高、overflow-x:auto、white-space:nowrap，子项用flex-shrink:0或inline-block，并修复ios safari卡顿与空白间隙问题。
横向滚动条默认出现在整个页面而非商品容器
浏览器默认把 overflow-x: auto 作用在 body 上时，会撑开整个视口并出现全局滚动条，而不是限制在商品列表区域内部。这是最常被忽略的布局前提。
必须确保商品容器有明确的尺寸约束和独立的滚动上下文：
- 给商品列表外层容器设固定
width或max-width（比如width: 100%配合max-width: 1200px） - 设置
overflow-x: auto和overflow-y: hidden - 添加
white-space: nowrap到子项容器（通常是.product-list），防止商品项自动换行 - 给每个商品项（
.product-item）设display: inline-block或用display: flex+flex-wrap: nowrap
移动端 Safari 滚动卡顿、无法拖拽
iOS Safari 对 overflow-x: auto 的硬件加速支持较弱，尤其在内容较多或含图片时，容易触发重排、掉帧甚至完全失灵。
关键修复点：
- 强制开启合成层：给滚动容器加
transform: translateZ(0)或will-change: scroll-position - 避免在滚动容器内使用
box-shadow、filter等高开销样式 - 图片务必设置显式宽高，防止加载时重排；用
loading="lazy"但避开首屏商品 - 不要用
scroll-behavior: smooth—— Safari 旧版本不兼容，且加剧卡顿
滚动条样式在 Chrome/Firefox/Safari 表现不一致
::-webkit-scrollbar 只在 Chromium 和 Safari 生效，Firefox 完全无视，且新版 Safari 已逐步限制自定义程度。
务实做法是「降级友好」而非强行统一：
- Chrome/Edge：用
::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb控制宽度和颜色 - Safari：接受系统默认细条（iOS/macOS 均无 hover 状态，也不响应 width 设置）
- Firefox：不写任何 scrollbar 伪类，让它显示原生窄条（它本就不支持自定义）
- 如需隐藏滚动条但保留功能：用
overflow-x: overlay（仅 Safari）或靠padding-right+margin-right: -16px遮盖（慎用，影响可访问性）
商品项间距错乱、滚动后对不齐
横向滚动中，inline-block 元素间的空白符（换行/缩进）会被渲染为 4px 左右空隙，导致等宽商品无法紧密排列；Flex 布局若未设 flex-shrink: 0，在小屏幕下会被压缩变形。
两种可靠方案：
- 用 Flex：父容器
display: flex+flex-wrap: nowrap，子项flex: 0 0 auto（即flex-shrink: 0+flex-grow: 0） - 用 Grid：父容器
display: grid+grid-auto-flow: column+grid-auto-columns: 240px（按实际商品宽度设） - 无论哪种，都删掉 HTML 中商品项之间的换行和空格，或用注释
<!-- -->连接 - 检查是否误用了
justify-content: space-between—— 它会让首尾项贴边，中间留空，不适合固定宽度滚动流
滚动行为本身简单，但真正难的是让不同设备、不同浏览器下都“看起来像一个东西”。最易被跳过的其实是容器尺寸继承链和 iOS 的合成层触发条件——漏掉任意一环，就可能从“能滚”变成“滚不动”或“滚得丑”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
