现代网页中实现点击暂停滚动文字应使用CSS动画+JavaScript控制，而非废弃的标签；核心是通过animation-play-state切换running与paused，并配合requestAnimationFrame方案提升长文本控制精度与体验。
滚动文字用 onclick 无法可靠暂停
直接给 加 onclick="this.stop();" 看似能用，但这是 HTML5 已废弃的非标准标签，Chrome 120+、Firefox 早已移除支持，Safari 从不支持。真正在现代页面里点一下就停，得换 CSS 动画 + JavaScript 控制。
用 @keyframes + animation-play-state 实现点击暂停
核心思路是：把滚动逻辑交给 CSS 动画，再用 JS 切换元素的 animation-play-state 属性值（running ↔ paused）。这样兼容性好，性能也比操作 DOM 位移更稳定。
常见写法要点：
- 滚动容器需设固定宽高和
overflow: hidden，子元素用white-space: nowrap防换行 -
@keyframes定义从右到左平移，位移量要 ≥ 子元素总宽度（可用100vw或动态计算） - 初始动画设为
animation-play-state: running，否则一上来就是静止的 - JS 中用
element.style.animationPlayState = 'paused'切换，注意驼峰命名
这是一段可以点击暂停的滚动文字……
scrollLeft + requestAnimationFrame 方案更适合长文本或需精确控制的场景
当滚动内容很长、或需要响应鼠标悬停、键盘操作、进度条同步时，CSS 动画会显得僵硬——它没法读取当前滚动位置，也不能中途修改速度。这时改用 JS 控制 scrollLeft 更灵活。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须用
requestAnimationFrame替代setInterval，避免丢帧和卡顿 - 暂停时保存当前
scrollLeft值，恢复时从该位置继续，否则会跳变 - 滚动容器需设
overflow-x: auto; scroll-behavior: auto（禁用平滑滚动） - 首次调用前先手动触发一次动画帧，确保初始状态正确
const el = document.getElementById('scroller');
let isPaused = false;
let currentPos = 0;
let rafId = null;
function animate() {
if (!isPaused) {
currentPos += 0.5;
el.scrollLeft = currentPos;
}
rafId = requestAnimationFrame(animate);
}
el.onclick = () => {
isPaused = !isPaused;
};
animate(); // 启动
移动端点击区域小、误触多，必须加 user-select: none 和点击反馈
纯文字滚动区域在手机上容易被当成可选中文本，导致光标弹出、滚动中断；同时用户点击后没视觉反馈，会反复点。这两点不处理，体验直接降级。
务必加上：
-
user-select: none（防止选中文本） -
cursor: pointer（提示可交互） - 点击时临时加个
opacity或background-color变化，哪怕只持续 100ms - 若滚动区域在
或带role="button"的容器里，还需处理键盘Enter/Space触发
复杂点在于：暂停/恢复状态需要持久化到 UI（比如加个图标切换），否则用户不知道当前是运行中还是已暂停。这个状态管理很容易被忽略，但恰恰是真实项目里最常被 QA 打回来的地方。
