HTML字幕标签如何设置滚动速度？跑马灯快慢调节方法-html教程-PHP中文网

现代浏览器已废弃marquee标签，scrolldelay和scrollamount无效；应改用CSS animation-duration精确控速或requestAnimationFrame驱动的JS方案。

html字幕标签如何设置滚动速度？跑马灯快慢调节方法

scrolldelay 和 scrollamount 都不能可靠控制现代浏览器中的滚动速度——它们只在旧版 IE 或部分 Edge 中起作用，Chrome/Firefox/Safari 已完全忽略。

为什么直接改 `scrolldelay` 没反应

这个属性本意是设置两次滚动动作之间的毫秒间隔，值越大越“慢”，但前提是浏览器还支持标签。而该标签早在 HTML5 中就被标记为 obsolete（废弃），W3C 不再维护，主流渲染引擎已移除对其逻辑的支持。

即使写了 scrolldelay="20"，Chrome 也当它不存在
部分安卓 WebView 或老旧 Electron 壳可能残留支持，但行为不一致、不可靠
scrollamount 同理：它控制“每次移动多少像素”，但现代浏览器根本不执行这一步计算

CSS 动画方案：用 `animation-duration` 精确控速

这是目前最轻量、兼容性最好、且能真正生效的方式。滚动快慢取决于动画完成一整轮所需时间，不是“跳多远”，而是“花多久”。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

把文字内容复制一份拼接，避免动画结束时回跳：比如 "公告：限时优惠 → 公告：限时优惠 →"
容器必须设 overflow: hidden，否则文字会撑开布局或溢出可见区
关键参数是 animation-duration：设为 10s 表示从右端滚到左端再滚出视野共耗时 10 秒；改成 5s 就快一倍
若出现 Chrome 下模糊抖动，加 transform: translateZ(0) 强制 GPU 加速

.marquee {
  white-space: nowrap;
  overflow: hidden;
}
.marquee span {
  display: inline-block;
  animation: scroll 12s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

JavaScript 方案：需要暂停/加速/响应交互时才用

当鼠标悬停要暂停、点击按钮切换快慢、或滚动内容含链接/图片时，CSS 动画不够灵活，得上 JS。

别用 setInterval：它不与屏幕刷新率同步，容易卡顿掉帧
必须用 requestAnimationFrame，每次只更新 element.scrollLeft（比操作 transform 更稳，尤其在低端安卓 WebView）
Uncaught TypeError: Cannot read property 'scrollWidth' of null 这类错误，99% 是 DOM 元素还没挂载就去读尺寸——务必先判空，或用 queueMicrotask 延迟到渲染后执行
悬停暂停时，得记录当前 scrollLeft 值，离开时恢复，否则会跳帧