COMPONENT 77 · Motion & Interaction
跑马灯
Marquee
也叫TickerScrolling Banner滚动字幕走马灯
让一列内容水平循环滚动，形成连续展示带。
Continuously scrolls a strip of content horizontally in a loop.
ANATOMY & USAGE
结构与使用建议
组成部分
- 裁切视口
- 重复内容轨道
- 暂停控制
适合使用
- 内容是装饰性品牌带或非关键实时摘要，且静态版本仍可用时。
不建议使用
- 包含必须阅读的信息或用户无法暂停时。
键盘与无障碍
- 提供暂停按钮，悬停和聚焦时暂停；减少动态偏好下改为静态，重复副本对辅助技术隐藏。
DESCRIBE IT TO AI
这样告诉编程助手
实现跑马灯（Marquee）：让一列内容水平循环滚动，形成连续展示带。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<section class="demo stack" aria-label="合作品牌">
<button type="button" aria-pressed="false">暂停滚动</button>
<div class="marquee">
<div class="track">Nova · Prism · Dunes · Orbit</div>
</div>
</section>