用 transform: translateY() 控制歌词滚动更平滑，配合 will-change: transform 和 requestAnimationFrame，结合节流、固定行高、overflow: hidden 等优化实现精准对齐。
歌词滚动靠 scrollTop 还是 transform？
用 scrollTop 控制容器滚动最直接，但容易卡顿、跳变，尤其在 iOS Safari 上；transform: translateY() 配合 will-change: transform 更平滑，也更容易和音频时间轴对齐。选后者，除非你必须兼容 IE11。
- 音频播放时每 50–100ms 检查一次
currentTime，算出当前该高亮哪一行，再算出它在歌词容器中的 top 偏移 - 把歌词行全部绝对定位或 flex 排列，用
transform移动整个歌词块，而不是滚动容器 - 别用
scrollIntoView——它会触发原生滚动行为，打断动画节奏，且无法控制缓动
怎么让某句歌词自动高亮并居中？
关键不是“滚动到”，而是“让当前句的 top 等于容器可视区中间位置”。需要提前知道每行高度（建议固定行高，比如 line-height: 1.6em），再结合行号计算偏移。
- 假设每行高度为
24px，容器高度240px，当前是第 5 行（从 0 开始），那么目标transform: translateY(-84px)（即-5 * 24 + 120） - 用
requestAnimationFrame更新transform，避免丢帧；不要在timeupdate里直接改样式 - 高亮逻辑和滚动逻辑分离：先算出当前行索引，再同时更新 class 和 transform，别在一个循环里反复 querySelector
timeupdate 触发太频繁，歌词跳行怎么办？
浏览器的 timeupdate 在音频播放中可能每秒触发 4–10 次，但 DOM 更新不需要这么密。高频触发 + 同步计算 + 强制重排 = 卡顿和错位。
- 加个简单节流：用
let lastUpdateTime = 0，只在currentTime变化 ≥ 0.1s 时才重新计算歌词位置 - 别依赖
timeupdate的精确性——有些设备会跳过事件，改用setInterval+audio.currentTime轮询更稳（间隔设为 60ms） - 歌词时间戳格式建议用数组而非对象：
[{t: 12.34, l: "春风十里"}]，方便用findLastIndex快速二分查找
移动端 iOS 滚动不跟手、回弹干扰怎么办？
iOS WebKit 对 overflow: scroll 容器有强干预，哪怕你用 transform，只要父容器有滚动属性，就可能被系统接管导致错位。
- 歌词容器必须设
overflow: hidden，且父级不能有任何overflow: auto/scroll - 禁用 iOS 滚动回弹：
body { overscroll-behavior-y: contain; }，否则手指划屏幕可能意外拖动歌词区域 - 真机调试时注意：Safari 的
transform动画默认不开硬件加速，加translateZ(0)或will-change: transform强制启用
歌词时间轴对齐这事，看着简单，实际卡点全在「精度控制」和「渲染时机」上——差 30ms 就可能闪一下，差一行高度就偏半屏。动手前先用固定时间戳 + 手动拖动 currentTime 测一遍偏移计算是否线性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
