scrolldelay 控制滚动帧间隔而非启动延迟,数值越大滚动越卡顿;它与 scrollamount 共同决定视觉速度,但仅影响位移节奏,无初始延迟功能,且标签已废弃,推荐用 css 动画替代。

scrolldelay 不是控制“滚动开始前的延迟”,而是控制两次滚动帧之间的间隔时间——数值越大,滚动越卡顿、越慢;数值越小,滚动越快、越连贯。它和 scrollamount 共同决定视觉速度,但作用机制完全不同。
scrolldelay 的真实作用机制
浏览器对 <marquee></marquee> 的渲染是“分步位移”:每过 scrolldelay 毫秒,就执行一次位移操作,位移距离由 scrollamount 决定。所以实际滚动节奏 = 每 scrolldelay ms 移动 scrollamount px。
- 设
scrolldelay="200"且scrollamount="5":每 200ms 跳 5px,肉眼明显感知停顿 - 设
scrolldelay="10"且scrollamount="1":每 10ms 移 1px,接近平滑动画(但受限于浏览器刷新率) - 若只调
scrolldelay而忽略scrollamount,可能造成“慢速抖动”而非“匀速缓动”
常见错误:把 scrolldelay 当成启动延时
很多人误写 scrolldelay="3000" 期望文字 3 秒后才开始滚动,结果发现只是滚动变得极其缓慢、一顿一顿的。这是典型混淆了“帧间隔”和“初始延迟”。
-
scrolldelay没有“首次延迟”语义,它从第一帧就开始生效 - 如需真正延迟启动,必须用 JavaScript 控制:
setTimeout(() => marquee.start(), 3000) - 部分旧版 IE 曾支持
truespeed属性来绕过系统定时器限制,但现代浏览器已完全忽略该属性
兼容性与废弃风险必须直面
<marquee></marquee> 标签在 HTML5 中已被正式弃用,所有主流浏览器(Chrome、Firefox、Edge、Safari)均不保证未来支持,且已移除部分行为细节(如对负值或非整数 scrolldelay 的容错处理)。
- 当前(2026年)多数浏览器仍能渲染,但控制台会输出弃用警告:
marquee is deprecated and will be removed in a future version -
scrolldelay值必须为正整数,传入小数(如"85.5")或字符串(如"85ms")会被强制截断或忽略 - 移动端 Safari 对
scrolldelay的最小有效值通常不低于 30ms,低于该值可能被钳位或失效
替代方案比硬调 scrolldelay 更可靠
如果你真需要可控的滚动节奏,CSS 动画 + transform 是唯一可维护路径。例如实现等效于 scrolldelay="100" + scrollamount="3" 的左滚效果:
marquee-fake {
white-space: nowrap;
animation: scroll-left 5s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
关键点在于:动画时长需按容器宽度和期望速度反推,不能直接映射 scrolldelay 数值;且需配合 will-change: transform 防止重排卡顿。
真正难的不是调出某个数值,而是接受 scrolldelay 已经是个“仅限兜底、不可依赖”的历史参数——它的存在本身,就是提醒你该换方案了。











