滚动文字逐字显现本质是字符级定时插入，需用JS将字符串转为Unicode安全数组并以requestAnimationFrame或带时间戳的setTimeout逐个写入DOM，避免split('')导致emoji等乱码。
滚动文字逐字显现的本质是字符级定时插入
不是靠 CSS animation 或 @keyframes 模拟“打字”，而是用 JS 控制每个字符在指定时间点写入 DOM。核心在于把字符串拆成数组，再用 setTimeout 或 requestAnimationFrame 逐个追加——否则会出现跳字、卡顿或光标错位。
常见错误是直接对整个字符串用 setInterval + substring，但一旦用户快速切换标签页或页面失焦，setInterval 的计时会漂移，导致剩余字符瞬间刷出。
- 推荐用
requestAnimationFrame驱动，更贴合浏览器渲染节奏 - 若需精确毫秒级控制（如配合音频），改用
setTimeout并记录起始时间戳，避免累积误差 - 初始状态建议将容器设为
visibility: hidden，等第一个字符写入后再显式设为visible，防止空白闪烁
拆分字符串别用 split('') 处理 emoji 和组合字符
中文、emoji 表情（如 ?）、带变音符号的字母（如 é）可能由多个 UTF-16 码元组成，'??'.split('') 会拆成 5 个乱码片段。直接遍历会导致显示异常或索引越界。
正确做法是用支持 Unicode 的迭代方式：
立即学习“前端免费学习笔记（深入）”；
const chars = [...text]; // 推荐：ES2015+ 解构赋值，自动处理代理对 // 或 const chars = Array.from(text); // 兼容性更好，IE11+ 支持
- 避免
for (let i = 0; i 直接索引，text.length对 emoji 可能不等于真实字符数 - 如果文本来自用户输入或 API，先用
String.prototype.normalize('NFC')归一化，减少组合字符歧义 - 测试用例务必包含 ??、?❤️?、\u{1F9D1}\u{200D}\u{1F9B5} 这类复杂 emoji
用 textContent 而非 innerHTML 插入单个字符
逐字写入时若混用 HTML 标签（比如想给某个字加 ），容易引发 XSS 或结构错乱。但绝大多数场景只需纯文本动画，textContent 更安全、更快，且不会触发 HTML 解析开销。
实操中注意：
- 初始化容器时清空内容用
el.textContent = ''，比el.innerHTML = ''少一次 DOM 树重建 - 如果真要插 HTML 片段（例如高亮第 3 个字），不要在循环里拼接字符串，改用
document.createElement+appendChild动态构建 - 避免在循环中反复读取
el.scrollHeight或el.offsetHeight，这会强制同步布局计算，严重拖慢长文本动画
滚动容器需手动控制 scrollTop 保持底部可见
当文字逐字追加到一个固定高度、overflow-y: auto 的容器时，新字符默认出现在末尾，但滚动条不会自动到底。用户看到的是“卡在中间”，必须主动滚动。
关键不是监听 scroll，而是在每次插入后立刻设置：
container.scrollTop = container.scrollHeight - container.clientHeight;
- 放在
requestAnimationFrame回调末尾，确保 DOM 已渲染完毕 - 如果容器有边框或 padding，
clientHeight不含它们，但scrollHeight含内容高度，相减结果仍准确 - 移动端 Safari 对
scrollTop设置有延迟，可加el.style.scrollBehavior = 'smooth'提升体验，但注意兼容性（iOS 16.4+）
最易被忽略的是异步中断处理：用户点击暂停/重播时，正在执行的 setTimeout 或未 resolve 的 Promise 必须被清除，否则回调仍会继续执行，造成状态混乱。别只存一个 timerId，对每个字符的定时任务都该有独立引用并可批量清理。
