<marquee> 标签已被 HTML5 废弃，不推荐使用；应采用 CSS @keyframes 实现可访问、可控的滚动效果，并按需叠加 JavaScript 交互逻辑。
<marquee> 标签在现代前端开发中**不推荐使用**，它已被 HTML5 废弃，Chrome、Firefox、Edge 等主流浏览器虽仍能渲染，但无标准支持、无 ARIA 语义、无法键盘导航、不响应屏幕阅读器，且 CSS 动画替代方案更可控、更可访问。
下面直接说怎么用现代方式实现等效效果，以及为什么老标签要避开。
为什么 <marquee> 会失效或行为异常
常见现象包括：滚动突然卡住、在移动端完全不滚动、刷新后方向错乱、与 Flex/Grid 布局冲突。根本原因是该标签没有定义明确的 CSS 盒模型行为，浏览器对其解析依赖私有实现。
-
behavior="slide"和behavior="alternate"在 Safari 中可能被忽略 -
scrolldelay和scrollamount单位模糊（毫秒？像素？无规范） - 无法用 JavaScript 动态控制暂停/继续（
marquee.stop()非标准，仅 IE/旧 Edge 支持） - 无障碍属性如
aria-live无法可靠绑定
CSS @keyframes 实现平滑滚动文字
用纯 CSS 可精准控制速度、方向、循环、暂停，并天然支持 :hover 暂停和媒体查询适配。
.marquee {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
- 动画时长
20s越大越慢；若内容短，可减小避免“空档期” -
padding-left: 100%是关键：让文字初始位置从右侧开始进入视区 - 需包裹两份相同文字（如
<span>文本文本</span>），否则结尾会闪白 - 加
.marquee:hover span { animation-play-state: paused; }实现悬停暂停
JavaScript 控制滚动节奏与交互逻辑
当需要动态控制（如点击切换方向、API 加载后启动、滚动到视口才激活），CSS 动画就力不从心，此时应封装轻量 JS。
- 用
requestAnimationFrame替代setInterval，避免丢帧 - 监听
IntersectionObserver判断是否在视口内，节省资源 - 方向切换建议用
transform: scaleX(-1)翻转容器，比重写动画更稳定 - 避免直接操作
element.style.left—— 触发重排，性能差
示例节选：
const el = document.querySelector('.js-marquee');
let isPaused = false;
function animate() {
if (!isPaused) el.scrollLeft += 0.5;
if (el.scrollLeft >= el.scrollWidth / 2) el.scrollLeft = 0;
requestAnimationFrame(animate);
}
animate();
移动端与可访问性必须处理的细节
走马灯本质是运动内容，WCAG 2.1 明确要求：用户应能暂停、停止或隐藏自动滚动信息。
- 必须提供显式按钮（如「暂停滚动」），并用
aria-pressed标记状态 - 在
@media (prefers-reduced-motion: reduce)下禁用动画：animation: none - 不要把重要信息（如价格、时效提醒）只放在滚动区域里——它可能被跳过、截断或未加载完成
- 滚动区域高度建议 ≥ 1.5em，确保触控目标足够大
<marquee> 标签省了三行代码，却埋下兼容性、维护性和无障碍三颗雷。用 CSS 动画起步，再按需叠加 JS 控制，才是可持续的做法。 
