滚动公告栏实现：CSS 无缝跑马灯与 JS 竖向轮播完整代码
页面顶部那条滚动的公告栏，本质是「容器 overflow:hidden + 内容做 transform 位移」的组合。本文给出三种实现：纯 CSS 跑马灯、CSS 关键帧轮播、JS 精确控制（悬停暂停 + 无缝循环），并说明移动端兼容细节。
一、结构基础
<div class="notice">
<span class="notice__tag">公告</span>
<div class="notice__viewport">
<ul class="notice__list" id="list">
<li>系统将于今晚 23:00–01:00 维护</li>
<li>新增导出功能，支持 CSV 与 Excel</li>
<li>客服热线调整</li>
</ul>
</div>
</div>.notice { display: flex; align-items: center; gap: 8px; height: 40px;
background: #fff8e6; border: 1px solid #ffe1a6; padding: 0 12px; }
.notice__tag { flex: 0 0 auto; font-weight: 700; color: #b26a00; }
.notice__viewport { flex: 1; overflow: hidden; white-space: nowrap; }核心就三点：外层固定高度并 overflow:hidden 裁掉多余内容、内容 white-space:nowrap 保证单行、用 transform 位移而不是 left（走合成层不触发重排）。
二、纯 CSS：水平无缝跑马灯
.notice__list { display: inline-block; padding-left: 100%;
animation: scroll 18s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }
.notice:hover .notice__list { animation-play-state: paused; }padding-left:100% 让文字从右侧外面进入，动画结束后正好整体移出左侧，形成循环；:hover 暂停满足用户细看的需求。
三、双份内容实现真正无缝
<div class="notice__viewport">
<div class="track">
<span class="group">第一条 第二条 第三条</span>
<span class="group" aria-hidden="true">第一条 第二条 第三条</span>
</div>
</div>.track { display: inline-flex; animation: loop 20s linear infinite; }
@keyframes loop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }复制一份内容并把第二份设 aria-hidden="true"（避免读屏重复朗读），动画移动 -50% 即完成一轮，接缝处视觉无跳变。尊重 prefers-reduced-motion 是必要的无障碍处理。
四、JS 版：按列表轮播 + 悬停暂停
const list = document.getElementById('list');
const items = [...list.children];
let i = 0, timer = null;
const H = 40; // 每条高度，与CSS保持一致
function step() {
i = (i + 1) % items.length;
list.style.transition = ‘transform .5s ease’;
list.style.transform = translateY(${-i * H}px);
if (i === items.length - 1) { // 到末尾时克隆首项实现竖向无缝
setTimeout(() => {
list.style.transition = ‘none’;
list.style.transform = ‘translateY(0)’;
i = 0;
}, 520);
}
}
function start() { timer = setInterval(step, 3000); }
function stop() { clearInterval(timer); }
start();
list.parentElement.addEventListener(‘mouseenter’, stop);
list.parentElement.addEventListener(‘mouseleave’, start);
document.addEventListener(‘visibilitychange’, () =>
document.hidden ? stop() : start()); // 页面切后台停止，省电
竖向轮播要点：transition 时长要小于 setInterval 间隔，否则动画被截断显得抖动；页面隐藏时停计时器；移动端把 mouseenter 换成 touchstart 或使用点击暂停。
五、细节与坑
- 条数太少：只有一条时别做动画，直接静态显示，否则空白循环很难看。
- 内容长度不固定：CSS 无缝滚动要精确算宽度，用 JS 时把
translateX(-50%)换成实测group.offsetWidth。 - 字体异步加载：Web Font 渲染完后宽度会变，导致位移错位，用
document.fonts.ready.then(...)重算一次。 - 滚动条出现：外层务必
overflow:hidden，不要用auto。 - 公告数据来自接口：先渲染骨架再替换，避免动画在数据到达前跑完一轮。
六、常见问题 FAQ
问：<marquee> 标签能用吗？
答：不建议。该元素已被废弃，不可控、无障碍差，且部分浏览器已改变其行为。用上面的 CSS/JS 方案，成本更低且更可控。
问：想让鼠标悬停时不位移只暂停怎么做？
答：animation-play-state:paused 即可，JS 版对应 clearInterval + 恢复时重建计时器。
问：怎么同时滚动多条（像新闻列表）？
答：把 viewport 高度设成两行、位移量改为 H 的整数倍，并让克隆份数与行数匹配即可。
关键记忆：裁切靠 overflow:hidden，位移用 transform，无缝靠“复制一份 + 移动 50%”或“克隆首项 + 归位”，并留出 :hover 暂停与 prefers-reduced-motion 降级。这三步做全，公告栏就是稳的。
生产内容，同时打通搜索引擎（SEO）与AI搜索引擎（GEO）流量入口的软件！ 点击进入365建站器 »
