scrollamount在现代浏览器中完全失效，因标签已被HTML5废弃，Chrome/Firefox/Safari自2015年起忽略其所有滚动属性；唯一可靠方案是CSS animation-duration配合@keyframes实现精确控制。
scrollamount 在现代浏览器中完全不起作用——不是你写错了，而是浏览器根本不会读它。
为什么改 scrollamount 没反应
因为 <marquee></marquee> 是 HTML5 中明确标记为 obsolete（废弃）的元素，Chrome、Firefox、Safari 从 2015 年起就移除了对它的动画逻辑支持。它们只保留标签解析能力，防止旧页面直接崩溃，但所有滚动相关属性（包括 scrollamount、scrolldelay）都会被主动忽略。
- 哪怕你写
<marquee scrollamount="1">文字</marquee>，渲染时也等同于没写这个属性 - IE11 虽然还识别
scrollamount，但在高 DPI 屏、禁用 GPU 加速等场景下，实际速度偏差可达 ±40%，无法复现 -
scrollamount的单位是“每次移动像素数”，但现代浏览器没有“帧步进”机制，这个概念本身已失效
CSS animation-duration 是唯一可靠方案
真正可控的速度，取决于动画完成一整轮所需时间，而不是“每帧跳多少像素”。用 @keyframes + animation-duration 才能获得确定性结果：
.scroll-text span {
animation: scroll-left 6s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
-
animation-duration: 6s→ 整轮滚动耗时 6 秒；设为3s就快一倍，12s就慢一半 - 父容器必须设
overflow: hidden和明确宽度，否则超出部分仍可见 - 避免在
transform中对除起止点外的插值使用百分比值，Safari 可能跳帧
需要动态变速？直接改 style.animationDuration
用户悬停暂停、点击加速等交互场景下，CSS 方案不够灵活，JS 直接操作 DOM 属性最稳：
const el = document.querySelector('.scroll-text span');
el.style.animationDuration = '2.5s'; // 立即生效
el.addEventListener('mouseenter', () => {
el.style.animationDuration = '0s'; // 暂停：设为 0s 即冻结在当前帧
});
el.addEventListener('mouseleave', () => {
el.style.animationDuration = '8s'; // 恢复
});
- 不要修改
style.animation字符串（如el.style.animation = 'scroll-left 4s'），容易因顺序/语法错误导致动画中断 - 移动端务必加
will-change: transform，否则快速切换animationDuration时易卡顿
真正难的不是“怎么写”，而是意识到 scrollamount 已经不是“不推荐”，而是“彻底失效”——所有依赖它的逻辑，在现代环境里都只是幻觉。
