因counter-increment无中间态，@keyframes无法插值，仅快照整数导致跳变；必须用tabular-nums等宽字体确保数字对齐；calc负号位移与cubic-bezier曲线协同实现丝滑翻滚。
为什么直接用 counter-increment + @keyframes 会闪跳？
因为 counter-increment 是离散触发机制，浏览器只在渲染帧里取整数值（比如 3 或 4），不会生成中间态（如 3.7）。@keyframes 里写 counter(digit) 只是快照当前值，不是可插值变量。所谓 steps(10) 只是把动画切成 10 段，每段仍显示整数，没有位移逻辑，结果就是“0 → 10”一跳到底。
transform: translateY() 滚动必须配 tabular-nums 吗？
是硬性前提，不是优化项。默认字体中 “1” 比 “0” 窄、“7” 比 “8” 细，堆叠后用 translateY() 位移，上下数字边缘对不齐，视觉上就是抖动或错行。font-variant-numeric: tabular-nums 强制所有数字等宽，但仅在支持该特性的字体中生效（如 SF Mono、IBM Plex Mono）。
- 显式声明字体链：
font-family: 'SF Mono', 'Consolas', 'Roboto Mono', monospace - 务必加
font-variant-numeric: tabular-nums，并在 DevTools 的 Computed 面板验证是否生效 - 用 ruler 工具量
0123456789的像素宽度，确认完全相等
calc(var(--digit) * -100%) 为什么不能写成正号或换单位？
这个公式依赖两个前提：容器高度 = 单个数字高度，且数字垂直堆叠占满整列。位移目标是让第 n 个数字精准居中，所以必须是负号 × 100% —— 正号会向下滚出视野；用 px 虽更稳妥，但破坏响应式；旧版 Safari 对 calc(-100% * var(--digit)) 解析可能失败。
-
calc(var(--digit) * 100%)→ 向下偏移，目标数字不可见 - 容器
height设为 48px，但line-height是 46px → 实际单行高浮动，100%基准失准 - 用
em或rem设容器高 → 父级font-size变动时，整个滚动节奏崩塌
cubic-bezier(0.33, 1, 0.68, 1) 能不能换成 ease？
不能。数字切换是离散跳变（从“3”瞬间切到“4”），ease 在起始/结束处加速度突变，人眼明显感知“卡一下”。这个贝塞尔曲线专为数字滚动调优：起始缓入、中间接近线性、结束强缓出，模拟真实滚轮惯性停稳过程。换掉就会顿挫或错位。
实际滚动效果是否丝滑，取决于三者是否同时生效：tabular-nums、translateY()、cubic-bezier(0.33, 1, 0.68, 1) —— 少一个，就大概率歪或抖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
