横向滚动推荐板块应使用 overflow-x: auto + flex 布局（子项 flex-shrink: 0）或 white-space: nowrap + inline-block，配合 touch-action: pan-x、scroll-snap-type 实现吸附、IntersectionObserver 懒加载及隐藏滚动条等完整体验。
横向滚动推荐板块用 overflow-x: auto 最直接
不用 JS 就能实现基础横向滚动，核心是让容器宽度超父容器、禁用纵向滚动、启用横向滚动条（或隐藏滚动条但保留滚动能力）。关键 CSS 是：overflow-x: auto + white-space: nowrap 或 flex 布局。
常见错误是只加 overflow: auto，结果触发双向滚动；或者忘了设 overflow-y: hidden，导致内容被截断又出现多余纵轴滚动条。
- 推荐用
display: flex+overflow-x: auto，子项用flex-shrink: 0防止被压缩 - 若用 inline-block，必须配
white-space: nowrap在父容器上，否则换行破坏横向排列 - 移动端需加
-webkit-overflow-scrolling: touch提升滑动流畅度（iOS Safari 仍依赖此） - 隐藏原生滚动条可用
::-webkit-scrollbar { display: none; }，但别删掉overflow-x: auto，否则无法滚动
用 scroll-snap-type 实现对齐停靠效果
用户滑动后商品卡片常“卡在中间”，体验差。CSS 的 scroll-snap-type 能让滚动自动吸附到每个卡片边缘，比 JS 实现更轻量、更兼容。
它依赖两个条件：容器设 scroll-snap-type: x mandatory，子项设 scroll-snap-align: start（或 center）。
立即学习“前端免费学习笔记（深入）”；
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- 必须配合
overflow-x: scroll（不能用auto，否则部分浏览器不触发 snap） -
scroll-snap-stop: always可强制每次只跳一格，避免快速滑动跳过多个卡片 - 注意 Safari 对
scroll-snap-type支持较晚（iOS 14.5+），旧版本会退化为普通滚动 - 不要给子项设
margin-right作为间隔——会导致 snap 错位；改用gap（flex 容器）或padding-inline-end
用 IntersectionObserver 触发懒加载或曝光统计
横向滚动区里的图片/商品数据，不该一上来全加载。用 IntersectionObserver 监听卡片是否进入可视区，比监听 scroll 事件更高效、更稳定。
注意它默认只观察元素在视口内的“进入”状态，横向滚动时需显式指定 rootMargin 扩展检测范围（比如 "0px 0px 0px 100px" 提前加载右侧即将进入的卡片）。
- 初始化时传入
{ root: null, threshold: 0.1 }即可，root: null表示以视口为根 - 每个卡片绑定 observer 时，用
observer.observe(cardElement)，回调里替换data-src到src加载图片 - 别在回调里直接调用 API 上报曝光——高频滚动可能触发多次，建议节流或用
once: true配合重新 observe - 服务端渲染（SSR）环境下，首次渲染需 fallback 到
loading="lazy"，避免 observer 还没挂载就触发加载
移动端 touch 操作要补 touch-action: pan-x
在 iOS 和部分安卓浏览器中，横向滚动区域可能被误判为页面左右滑动（比如轮播图或手势返回），导致手指一划页面就翻页或卡顿。
根本解法是明确告诉浏览器：“这个区域只响应横向拖拽”，即加 touch-action: pan-x。不加的话，即使写了 preventDefault() 也容易失效，且影响性能。
- 必须加在滚动容器上（不是子项），且优先级高于其他
touch-action值 - 如果同时支持缩放（如商品图双指放大），可用
touch-action: pan-x pinch-zoom - PC 端鼠标滚轮不受影响，该属性只作用于 touch 设备
- 测试时用真机 Safari / Chrome for Android，模拟器常不触发 touch 事件
