<p>数字滚动错位根因是字体不等宽，必须用tabular-nums或等宽字体链；line-height需匹配容器高度；位移公式须为transform: translateY(calc(var(--digit) * -100%))；动画用cubic-bezier(0.33,1,0.68,1)并只过渡transform。</p>
为什么数字滚动总错位？等宽字体不是可选，是必须
数字滚动错位的根因几乎全是字体不等宽。0–9在多数字体里宽度不同（比如“1”窄、“0”宽），堆叠后上下对不齐，transform: translateY()一动就 visibly 偏移。必须用 font-variant-numeric: tabular-nums 或显式指定等宽字体链：font-family: 'SF Mono', 'Consolas', 'Roboto Mono', monospace。
注意：tabular-nums 仅在支持数字变体的字体中生效（如 SF Mono、IBM Plex Mono），纯 monospace 不保证所有数字严格等宽；iOS Safari 对 tabular-nums 支持较晚（iOS 15.4+），老版本需 fallback 到硬编码字体链。
- 验证是否生效：打开 DevTools → Elements → Computed → 检查
font-family实际解析值，再看多个数字并排时宽度是否一致（可用 ruler 工具量） - line-height 必须设为与容器高度一致（如
height: 48px; line-height: 48px），否则单行高度浮动会放大错位 - 避免用
em或rem设高度——它们受父级 font-size 影响，易引入不可控缩放
位移公式写错一个符号，滚动就卡顿或反向
核心位移逻辑是：让数字列整体上移，把目标数字“推”到可视区中心。公式固定为 transform: translateY(calc(var(--digit) * -100%))，其中 --digit 是当前要显示的数字（0–9），负号不能漏。
常见错误：calc(var(--digit) * 100%)（正号→向下滚出视野）、calc(-100% * var(--digit))（语法合法但部分旧浏览器解析异常）、或用 px 替代 %（导致响应式失效）。
立即学习“前端免费学习笔记（深入）”；
- 容器高度必须为单个数字高度的整数倍（推荐 100%），否则
100%计算基准失准 - IE 完全不支持
calc()中使用自定义属性，需降级为 JS 直接设style.transform = `translateY(-${n * h}px)` - 若用 JS 更新
--digit，务必用el.style.setProperty('--digit', n)，而非el.setAttribute('style', ...)（后者会覆盖原有 style）
cubic-bezier(0.33, 1, 0.68, 1) 不是炫技，是解决“顿挫”的刚需
默认 ease 在数字切换瞬间加速度突变，人眼明显感知“卡一下”。而 cubic-bezier(0.33, 1, 0.68, 1) 是一种“缓入缓出加强版”，让位移起始和结束更柔和，中间段保持较快线性运动——这恰好匹配数字“滑入→停稳”的视觉预期。
别用 ease-in-out 替代：它的贝塞尔曲线是 (0.42, 0, 0.58, 1)，起始加速太慢，数字“启动迟滞”；结束减速又太急，像突然刹车。
- transition 必须只写
transform，不要写all（避免意外触发动画重绘） - 动画时长建议 0.25s–0.4s：短于 0.2s 显得生硬，长于 0.4s 会让用户感觉延迟
- 多个数字同时滚动时，可对每位加
animation-delay错开 20–50ms，模拟真实机械翻牌节奏
多位数字联动时，小数像素位移会导致文字发虚
当滚动年份（如 2026）或时间（14:32:05）时，每位独立用 % 单位位移，浏览器可能计算出 13.7px 这类非整数偏移。在非 retina 屏或 zoom ≠ 100% 下，字体渲染会模糊甚至闪烁。
解法不是禁用 %，而是强制对齐像素：给容器加 will-change: transform 触发 GPU 合成，并确保其父容器无 transform/opacity 等触发层叠上下文的属性（否则合成层被截断）。
- 更稳妥的做法：用
translateY(-${Math.round(n * h)}px)（JS 计算后取整），放弃 CSS 自定义属性方案 - 移动端需额外加
-webkit-transform: translateZ(0)（iOS Safari 15.2 之前对 will-change 支持不稳定） - 如果用 rem/em 设容器高，务必确认根 font-size 是整数（如 16px），避免 1.25rem = 20.5px 这类源头误差
实际滚动效果是否丝滑，不取决于动画帧率，而在于字体对齐精度、位移计算确定性、以及 GPU 合成是否真正启用——这三个点任一失控，都会让“丝滑”变成“卡顿”。
