Flex布局实现H5多列标签横向滚动需设display:flex、flex-direction:row、overflow-x:auto；通过双份数据拼接或动态移位+JS重置scrollLeft模拟无缝循环，辅以隐藏滚动条、触控吸附和虚拟滚动优化体验。
用 Flex 布局实现 H5 多列标签无限横向滚动，关键不在“无限”本身（真无限不现实），而在于视觉上营造连续、无缝、可循环滑动的效果。核心是 Flex 提供的横向排列能力 + JavaScript 模拟循环逻辑，而非纯 CSS 实现“无限”。
基础容器与子项设置
先确保 Flex 容器能稳定横向排列并支持滚动：
- 容器设 display: flex 和 flex-direction: row，默认主轴即为水平方向
- 加 overflow-x: auto 开启横向滚动，配合 white-space: nowrap 防止子项换行
- 每个标签项设 flex: 0 0 auto，避免被压缩或拉伸；宽度按需固定（如 width: 80px）或由内容撑开
- 务必添加 -webkit-overflow-scrolling: touch，保障 iOS 上滑动顺滑
模拟“无限滚动”的常用策略
纯 CSS 无法真正无限，但可通过以下方式让用户体验接近无限：
-
双份数据拼接法：将原始标签数组复制一份拼在末尾（如
[A,B,C] → [A,B,C,A,B,C]），滚动到后半段时，用 JS 监听位置，在视觉即将到达“副本起点”时，瞬间重置 scrollLeft 到对应原始位置（如从 300px 跳回 0px），用户无感知 - 动态插入/移除法：监听滚动位置，当靠近右边界时，把最左侧已滑出视口的标签移到右侧末尾；靠近左边界时，把最右侧标签移到左侧开头。需配合 requestAnimationFrame 控制时机，避免卡顿
-
CSS transform + 定位偏移：用
transform: translateX()替代原生 scrollLeft，更利于动画控制；结合定时器或 touchend 后的惯性计算，让位移看起来连贯循环
增强体验的关键细节
光能滚不够，还得好用、好看、易维护：
- 滚动条隐藏：用 overflow-x: hidden 配合内部 wrapper 元素滚动，再自定义指示器（如底部小圆点进度条），提升美观度
- 对齐控制：用 justify-content: flex-start / center / space-between 管理标签间距；若需居中当前项，需 JS 计算并调整偏移量
- 触控反馈：监听
touchstart/touchmove/touchend，记录起始位置和滑动距离，松手后根据速度决定是否自动吸附到最近标签中心 - 性能优化：标签数量多时，只渲染视口内及前后一两个标签（虚拟滚动思想），其余用占位元素保持布局高度
不复杂但容易忽略
