marquee标签通过scrollamount和scrolldelay属性控制滚动速度,但已废弃且兼容性差;推荐用CSS @keyframes实现平滑、全平台兼容的滚动动画,或用requestAnimationFrame+transform优化JS滚动性能。

用 marquee 标签改滚动速度最直接,但注意它已废弃
HTML5 不再支持 marquee 的语义化,但多数浏览器仍能渲染。若你模板里已有 ,改速度只需调整 scrollamount 和 scrolldelay 属性:
scrollamount 控制每次移动像素数(越大越快),scrolldelay 是毫秒级延迟(越小越快)。常见组合:scrollamount="2" + scrolldelay="100" 较平缓;scrollamount="5" + scrolldelay="40" 明显加快。
⚠️ 注意:部分新版 Edge 或严格模式下可能失效;手机 Safari 完全不支持 marquee。
用 CSS @keyframes 实现兼容滚动更可靠
真正符合 HTML5 规范的做法是用 CSS 动画替代 marquee。关键在于控制 animation-duration 和使用 linear 时间函数:
立即学习“前端免费学习笔记(深入)”;
【重要】系统将于今晚22:00维护 【通知】新版本已上线,欢迎体验
滚动速度由 animation-duration: 20s 决定——数值越小越快(如 10s 加倍速);需确保 span 内容总宽度超过容器,否则动画无效果。
SiteStar V2.7版功能说明:增加和改善功能1、站点基本设置中增加地址栏图标上传。2、调整文章、产品按后台顺序值从大到小进行排序显示。3、新增留言模块自定义留言项功能,方便各种网站留言表单需求。4、下载模块中,下载类型新增外部链接方式。5、友情链接、在线客服模块,新增排序字段,可调整显示顺序。6、新增走马灯按后台顺序值从大到小进行排序显示。7、增强公告模块设置滚动速度。8、产品列表显示方式
✅ 优势:全平台兼容,可响应式适配,支持暂停/鼠标悬停暂停(加 animation-play-state: paused)。
JavaScript 控制滚动时避免卡顿和重绘问题
若公告栏需动态加载或交互控制(如点击暂停、后端推送新条目),用 JS 更灵活,但容易出性能问题:
- 别用
setInterval频繁修改left值——触发强制同步布局,导致掉帧 - 优先用
requestAnimationFrame+transform: translateX() - 确保滚动容器设
will-change: transform或transform: translateZ(0)启用 GPU 加速
简单示例(每帧位移 0.5px,等效于中速滚动):
const el = document.querySelector('.notice-scroll');
let pos = 0;
function animate() {
pos -= 0.5;
el.style.transform = `translateX(${pos}px)`;
if (pos <= -el.scrollWidth / 2) pos = 0;
requestAnimationFrame(animate);
}
animate();
移动端适配时滚动速度要单独调低
手机屏幕窄、手指易误触,相同像素速度在移动端会显得更快、更晃眼。建议:
- 用媒体查询区分设备:
@media (max-width: 768px) { .notice-scroll span { animation-duration: 35s; } } - 禁用移动端自动滚动(尤其 iOS Safari),加
touch-action: none防止手势冲突 - 若用户手动滑动过公告区域,应暂停自动滚动(监听
touchstart并临时清除动画)
滚动不是越快越好,慢一点反而更易读。很多模板默认值偏快,实际发布前最好在真机上试跑 3 分钟以上——眼睛疲劳感就是速度是否合理的直接反馈。









