本质是固定容器宽度并阻止内容换行，使超出部分仅X轴可滚动；需设overflow-x:auto、white-space:nowrap、明确width/max-width，子项用flex:0 0 auto或inline-block，移动端加-webkit-overflow-scrolling:touch。
用 overflow-x: auto 实现横向滚动容器
横向卡片局部滚动的本质，是让一个固定宽度的容器内部内容超出时只在 X 轴方向可滚动，且不破坏页面整体布局。最直接有效的做法就是给卡片容器设 overflow-x: auto 和 white-space: nowrap（防止子元素换行），再确保子卡片是 inline-block 或使用 display: flex 配合 flex-wrap: nowrap。
常见错误是只加 overflow: auto 却没限制高度或没阻止换行，结果变成竖向滚动或卡片堆成一列。
- 容器必须有明确的
width或max-width，否则可能撑满父容器失去“局部”效果 - 子卡片推荐用
flex布局而非inline-block，后者对空白符敏感，容易多出意外间隙 - 移动端需加
-webkit-overflow-scrolling: touch提升滑动流畅度（iOS Safari 旧版本必需）
Flex 容器 + scroll-snap-type 做吸附式滚动
如果希望每次滚动都停在一张卡片边缘（比如轮播预览场景），scroll-snap-type 是现代方案。它不依赖 JS，纯 CSS 可控，但要注意浏览器兼容性——Safari 11.1+、Chrome 69+、Firefox 68+ 支持良好。
关键点在于：父容器设 scroll-snap-type: x mandatory，子卡片设 scroll-snap-align: start，且必须配合 overflow-x: auto 和 scroll-behavior: smooth（可选）。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 若卡片宽度不统一，
scroll-snap-align: center更稳妥，但需确保容器有足够内边距避免裁切 -
mandatory表示强制吸附，proximity则只在靠近时吸附，体验更松散但容错更高 - 别忘了给卡片加
flex-shrink: 0，否则 Flex 会压缩它们破坏吸附精度
避免横向滚动条干扰视觉
默认滚动条会占用空间、样式丑，尤其在小容器里很突兀。隐藏它需要分两步：一是用 overflow-x: scroll 强制显示滚动条（确保可滚动），二是用伪元素覆盖或透明化。
最兼容的做法是针对 WebKit 内核（Chrome/Safari）用 ::-webkit-scrollbar，其他浏览器暂无标准 API，只能接受默认或 JS 模拟滚动条。
- 隐藏但保留功能：
::-webkit-scrollbar { width: 0; height: 0; } - 若要完全移除滚动条且仍可拖拽，得用
padding-bottom补偿滚动条高度（仅限垂直方向），横向无法等效补偿，所以不建议彻底移除 - 部分安卓 WebView 对
scrollbar-width: none（Firefox）或scrollbar-color无效，优先保功能而非外观
移动端触摸滚动失效或卡顿的修复点
iOS 和部分安卓 WebView 中，overflow-x: auto 容器常出现无法拖动、回弹异常、或手指抬起后立刻停止的问题。这不是 bug，而是浏览器对非 body 级滚动的优化限制。
核心解法是触发硬件加速并明确告知浏览器该区域需要触控响应：
- 给滚动容器加
touch-action: pan-x，禁止默认的双指缩放/竖向滚动干扰 - 加
will-change: scroll-position或transform: translateZ(0)激活 GPU 加速（注意别滥用，影响重绘性能） - 确保容器没有
pointer-events: none或被遮挡的透明层，否则 touch 事件根本传不到 - 若用
position: sticky卡片做导航锚点，它和横向滚动共存时极易冲突，建议改用 JS 监听scrollLeft手动控制高亮
横向滚动看着简单，但跨端表现差异大，真正在意体验的话，得在 iOS、Android Chrome、微信内置浏览器里各测一遍 —— 尤其是“松手后是否惯性滑动”这个细节，不同内核策略完全不同。
