纯css实现无缝水平滚动需内容可复制且容器宽度固定；js方案因scrollleft精度漂移和盒模型误差易错位，须用容差判断、动态重测宽及像素对齐。
纯 CSS 能实现真正无缝的水平滚动，但必须满足两个硬条件：内容可复制、容器宽度固定或可推导。JavaScript 方案更灵活，但容易因 scrollLeft 精度漂移或盒模型误差导致错位——这不是代码写错了，而是浏览器渲染机制本身带来的累积偏差。
为什么直接用 white-space: nowrap + inline-block 图片会错位
常见错误是把 <img> 直接塞进容器并设 white-space: nowrap。问题出在三处：
-
<img>默认是 inline 元素，受字体基线、空白符缩进影响，实际宽度 ≠ 你设的 width - 滚动时靠
scrollLeft += container.clientWidth偏移，但 clientWidth 是整数，而真实元素总宽常含小数（如 border-box + sub-pixel 渲染） - 多次滚动后，
scrollLeft值和预期位置偏差越来越大，上一张图右边缘就会“漏”进当前视口
CSS 方案：双份内容 + transform 动画（推荐用于文字/图标通知栏）
适用于静态内容、无需交互、只跑动画的场景，比如顶部通知条、品牌 logo 滚动墙。
- HTML 里放两份完全相同的子元素（不是复制 DOM，而是结构上重复）
- 用
@keyframes控制transform: translateX()，起点100%，终点-100% - 两组内容分别加不同
animation-delay，让它们错开滚动，视觉上永远有内容在“补位” - 必须设
overflow: hidden和white-space: nowrap，否则边缘会露出来 - 移动端加
touch-action: none，否则手指滑动会打断动画
JavaScript 方案：监听 scroll + 动态追加（推荐用于轮播图/商品列表）
适合需要用户拖拽、暂停、点击跳转的场景，但必须绕开原生 scrollLeft 的精度坑。
- 不要依赖
element.scrollLeft % itemWidth === 0来判断是否到头——浮点误差会让它永远不成立 - 改用
Math.abs(element.scrollLeft - targetPos) 做容差判断 - 滚动到底部时，不是立刻
scrollLeft = 0，而是先scrollLeft += originalContentWidth，再用requestAnimationFrame平滑跳回 - 每次追加新内容前，先用
getBoundingClientRect()重新测一遍容器宽度，别信 CSS 里写的100% - 给每个子项加
flex: 0 0 auto+ 显式width，避免 flex 自动收缩干扰布局
最容易被忽略的细节：图片尺寸与容器宽度必须对齐
无论用 CSS 还是 JS，只要图片宽度 × 数量 ≠ 容器宽度的整数倍，接缝处就一定有 1px 错位或拉伸。这不是 bug，是像素对齐问题。
- 用
background-image做滚动背景时，图宽必须是容器宽的整数倍（如容器 800px，图宽 1600px 或 2400px） - 用
<img>时，统一用width: 100vw或固定 px 值，禁用max-width: 100%—— 它会在缩放时引入非整数像素 - Canvas 实现无限滚动背景时，每帧重绘前对坐标做
Math.floor()，否则长时间运行后接缝会抖动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
