HTML5如何批量生成滚动文字_用模板字符串循环插入DOM【方法】

不推荐使用marquee标签，html5已废弃；应采用css动画或javaScript实现滚动，前者轻量高效，后者更灵活可控。

滚动文字用 marquee 标签还行吗？

不行。html5 已废弃 marquee，现代浏览器虽多数仍能渲染，但不保证兼容性，且无法精准控制速度、暂停、方向等行为。W3C 明确不推荐，CSS 动画或 javascript 才是正解。

用 CSS @keyframes + animation 实现批量滚动

这是最轻量、性能最好、也最容易批量生成的方式。核心思路是：用 js 拼接 HTML 字符串（模板字符串），插入容器，再靠 CSS 统一驱动滚动动画。

• 滚动容器必须设 white-space: nowrap 和固定宽度/溢出隐藏
• 每个滚动项需包裹在独立 或
  中，并设 display: inline-block 避免换行挤压

• 动画时长和延迟要根据文字长度动态计算，否则短文本会“闪退”，长文本会卡顿

const texts = ['前端开发', 'React 19', 'TypeScript 5.4', 'Vite 5']; const container = document.getElementById('ticker'); const html = texts.map((text, i) => `   ${text} `).join(''); container.innerHTML = html;

CSS 部分需配合：

@keyframes ticker-move {   0% { transform: translateX(100%); }   100% { transform: translateX(-100%); } } .ticker-item {   display: inline-block;   margin-right: 2rem;   animation: ticker-move 15s linear infinite;   animation-delay: var(--delay); }

用 requestAnimationFrame 手动滚动更可控

当需要响应鼠标悬停暂停、点击跳转、或与滚动位置联动时，CSS 方案不够灵活。此时应改用 JS 控制位移，模板字符串依然用于初始 dom 插入，但后续靠帧循环更新 transform。

立即学习“前端免费学习笔记（深入）”；

• 避免直接操作 scrollLeft —— 容器需设 overflow: hidden，否则滚动条干扰布局
• 每帧位移量建议用时间差（deltaTime）计算，而非固定像素，防止高刷屏下加速
• 批量生成后，对每个 ticker-item 保存其起始 offsetWidth，用于判断是否移出视区并复位

关键逻辑节选：

let x = 0; function tick(timestamp) {   if (!lastTime) lastTime = timestamp;   const deltaTime = timestamp - lastTime;   x -= deltaTime * 0.2; // 像素/ms 调速   items.forEach(el => el.style.transform = `translateX(${x}px)`);   if (x < -totalWidth) x = 0; // 复位   requestAnimationFrame(tick); }

模板字符串拼接 DOM 的坑：别漏了 textContent 转义

如果滚动内容来自用户输入或 API，直接插进模板字符串会引发 xss。比如 ${userInput} 遇到 就执行了。

• 安全做法：先创建临时元素，用 textContent 赋值，再取 innerHTML
• 或用 DOMPurify.sanitize() 过滤，但会增加包体积
• 纯文字滚动场景下，优先用 document.createTextnode() 替代字符串插值

简易转义函数示例：

function escapeHtml(str) {   const div = document.createElement('div');   div.textContent = str;   return div.innerHTML; } const safeText = escapeHtml(userInput); const itemHtml = `${safeText}`;

批量生成滚动文字本身不难，难的是让多个滚动项节奏一致、响应交互、适配不同屏幕宽度，还有内容安全——这些细节往往在第一次上线后才暴露。