vertical-align 对数字滚动无效，因其仅作用于行内元素或表格单元格，而数字滚动依赖 transform: translateY() 精确控制位移，与行高对齐逻辑无关；真正关键的是单行实测高度与 transform 像素值的严格匹配。
vertical-align 为什么对数字滚动没用
因为 vertical-align 只作用于行内元素或表格单元格，而数字滚动本质是靠 transform: translateY() 在固定容器内切换多行数字位置，和行高对齐逻辑无关。强行加 vertical-align: middle 不会改变滚动偏移，反而可能干扰父容器布局。
常见错误现象：vertical-align 设了但数字上下跳动不稳、最后一帧错位、在 Flex 容器里完全失效。
- 真正起作用的是
transform: translateY(-Npx)的精确像素值，必须和单行数字高度严格匹配 - 如果用 em/rem 单位，需确保父元素字体大小稳定，否则滚动距离漂移
- 不要把滚动容器设为
display: inline-block后再依赖vertical-align对齐——这会让基线计算不可控
CSS @keyframes 滚动动画卡顿或跳帧
本质是浏览器对 transform 和 opacity 的优化程度不同：只有 transform 和 opacity 能触发合成层（compositor layer），其他属性如 top、margin-top 或 font-size 会强制重排（reflow）+ 重绘（repaint），导致掉帧。
使用场景：需要平滑滚动 0–999 的三位数，每秒更新一次。
立即学习“前端免费学习笔记（深入）”；
- 动画必须只用
transform: translateY()，禁止出现top或margin - 关键帧数量要和数字行数一致，比如 10 行数字（0–9），就写 10 帧，不能写成 from/to 两帧再靠 timing-function 模拟——浏览器无法插值位移索引
- 给滚动容器加
will-change: transform（仅在动画触发前动态加，结束后移除），避免全生命周期开销
数字滚动容器高度算不准，底部被截断
问题出在「单行数字高度」的测量方式。CSS 中 line-height 不等于实际文字占据高度，尤其遇到数字字体（如 font-family: 'Digital-7'）时，上下留白极不规则。
正确做法永远以 getBoundingClientRect().height 实测为准，而不是用 line-height × 行数 估算。
- 在 JS 初始化时，临时渲染一个不含动画的数字（如
"8"），读取其clientHeight或getBoundingClientRect().height - 容器总高度 = 单行实测高度 × 数字行数（例如 0–9 共 10 行）
- 如果用了
font-feature-settings: "tnum"或等宽数字，也要在实测时开启，否则高度偏差可达 2–3px - 避免用
em直接乘算：某些字体下1em是 16px，但数字实际占 18.2px，误差会逐行累积
React/Vue 中数字变化后滚动动画不触发
根本原因是 CSS 动画不会响应 class 名变更或 style 对象浅层更新，必须让浏览器感知到“动画属性值发生了变化”，哪怕只是重置 animation 名称或加个时间戳。
常见错误：只改了 style.transform，但没重置动画状态；或用 key 强制重渲染却忘了清空上一帧的 transform。
- 推荐做法：每次数字变化时，先移除动画 class → 强制 reflow（如读一次
offsetHeight）→ 再加上带新transform的动画 class - 或者用
animation: roll-num 0.3s steps(1) forwards配合animation-name动态拼接时间戳，例如roll-num-${Date.now()} - Vue 用户注意：不要在
:style里直接写{ transform: `translateY(${y}px)` }，这会绕过 transition 系统；应通过 class 切换 + CSS 自定义属性控制位移
最麻烦的其实是字体加载时机——@font-face 加载完成前，实测高度是 fallback 字体的，等 Web Font 就绪后高度突变，整个滚动偏移全乱。这个点很多人调半天才发现不是代码问题，是字体。
