scrollamount 是 的原生 html 属性,无法通过 css 修改,必须用 javascript 设置可写的 scrollamount dom 属性;现代推荐方案是用 css 动画替代 。

scrollamount 是 <marquee></marquee> 标签的原生属性,它不能直接用 CSS 修改——CSS 里根本没有这个属性,浏览器也不识别 scrollamount 作为 CSS 声明。
为什么改不了?
因为 scrollamount 是 HTML 元素的专有布尔/数值型属性,由浏览器内置的 <marquee></marquee> 渲染引擎解析,不属于 CSS 可控范围。你写 marquee { scrollamount: 2; } 完全无效,DevTools 里也看不到这条样式生效。
想动态调速,只能用 JavaScript 操作 DOM 属性
要改速度,必须通过 JS 直接设置元素的 scrollAmount 属性(注意:JS 中是驼峰命名,不是连字符):
<marquee id="news-ticker">重要通知:系统将于今晚升级</marquee><script>
const ticker = document.getElementById('news-ticker');
ticker.scrollAmount = 4; // 立即生效,等价于 scrollamount="4"
// 也可以响应用户操作
document.querySelector('#speed-up').onclick = () => {
ticker.scrollAmount = Math.min(ticker.scrollAmount + 1, 20);
};
</script>
-
scrollAmount是只读属性?不,它是可写的 DOM 属性,修改后滚动会实时变快/慢 - 值必须是正整数,建议控制在
1–10区间;超过20容易跳帧或文字“瞬移” - 不能用
setAttribute('scrollamount', '5')替代,部分浏览器兼容性差,优先用点号赋值
真正推荐的替代方案:用 CSS 动画重写滚动效果
既然 <marquee></marquee> 已被 HTML5 废弃,且 scrollamount 无法 CSS 化,不如彻底放弃它,用现代方式实现可控滚动:
<div class="ticker">
<div class="ticker-content">公告一|公告二|公告三|公告四|</div>
</div>
<style>
.ticker {
overflow: hidden;
white-space: nowrap;
}
.ticker-content {
display: inline-block;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
- 速度由动画时长
20s控制:数值越小,滚动越快;可绑定 JS 动态改animationDuration - 方向由
translateX()正负号决定;垂直滚动换成translateY() - 完美支持响应式:媒体查询中可单独调整不同屏幕下的
animationDuration - 无障碍友好:可加
aria-live,而<marquee></marquee>几乎无可访问性支持
别再试图给 scrollamount 加 CSS 类了——它根本不是样式问题,而是技术路径过时。真正需要改的,是你的实现思路本身。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











