用 requestAnimationFrame 控制 scrollLeft 实现可控启停：维护 isPaused 状态和 animationId，暂停时 cancelAnimationFrame 并冻结 scrollLeft，恢复时从断点续播；需兼容 mouseenter、touchstart、IntersectionObserver 及页面可见性变化。
滚动文字如何用 scrollLeft + setInterval 实现可控启停
纯 CSS 的 <marquee></marquee> 已被废弃，现代做法必须用 JS 控制 DOM 元素的 scrollLeft（水平）或 scrollTop（垂直）。核心是手动驱动位移：每帧递增偏移量，再用 requestAnimationFrame 或 setInterval 循环执行。关键不是“怎么动”，而是“怎么随时停”——停的本质是清除定时器或中断帧循环。
常见错误是只设了 clearInterval(timer) 却没重置 scrollLeft，导致下次启动时从中间位置突跳；或者在鼠标移入时暂停但未保存当前速度状态，移出后直接加速。
- 推荐用
requestAnimationFrame替代setInterval，更精准且页面切后台时自动暂停 - 必须缓存当前
scrollLeft值和方向（正/负），暂停时冻结，恢复时继续累加 - 若滚动容器是
overflow: hidden的父元素，动画目标必须是其子元素（如<div class="scroller">），不能直接动父容器自身<h3>监听 <code>mouseenter/mouseleave中断滚动的正确写法鼠标悬停暂停是最常用条件，但直接绑定
mouseenter并调用cancelAnimationFrame不够——需区分“暂停中再次悬停”和“已暂停时移出”的状态，否则会重复清除或漏恢复。典型结构是用一个布尔变量
isPaused标记状态，并在事件回调里做判断：立即学习“前端免费学习笔记（深入）”；
let isPaused = false; let animationId = null; <p>function animate() { if (!isPaused) { container.scrollLeft += 1; // 到头了就回滚 if (container.scrollLeft >= scroller.scrollWidth - container.clientWidth) { container.scrollLeft = 0; } } animationId = requestAnimationFrame(animate); }</p><p>container.addEventListener('mouseenter', () => { isPaused = true; });</p><p>container.addEventListener('mouseleave', () => { if (isPaused) { isPaused = false; animate(); // 重新触发一帧，避免卡死 } });注意：不要在
mouseleave里直接调requestAnimationFrame(animate)，必须先重置isPaused，否则下一轮animate()还会因条件不满足而跳过执行。IntersectionObserver滚动进入视口才启动的场景适配当页面有多个滚动字幕、且希望“只加载可视区域内的”时，
mouseenter就失效了——用户可能滚动进页面而非鼠标悬停。这时要用IntersectionObserver监听元素是否在视口内。它不依赖鼠标，适合移动端和无障碍场景，但要注意：默认触发一次后不会反复回调，需配置
{ threshold: 0, rootMargin: '0px' }并在回调里手动控制启停逻辑。- 观察器回调中，根据
entry.isIntersecting决定调用startScroll()或pauseScroll() - 每个滚动容器需独立维护自己的
animationId和isPaused，避免多个实例互相干扰 - 若页面有懒加载图片，
rootMargin可设为'100px'提前激活，防止滚动时闪动
移动端触摸中断与
touchstart的兼容处理在 iOS/Android 上，用户手指划过滚动区域时，原生会触发
touchstart，但此时若只监听mouseenter就完全无响应。必须同时监听touchstart并阻止默认行为，否则系统会接管滚动、JS 动画直接卡死。正确做法是统一暂停入口函数，在多个事件里调用同一逻辑：
function pauseScroll() { isPaused = true; if (animationId) { cancelAnimationFrame(animationId); animationId = null; } } <p>container.addEventListener('mouseenter', pauseScroll); container.addEventListener('touchstart', pauseScroll); // 注意：这里不加 preventDefault，除非你同时禁用了原生滚动容易忽略的是：iOS Safari 对
touchstart的触发有 300ms 延迟（尤其在非 viewport meta 设置下），若需即时响应，得加<meta name="viewport" content="width=device-width, user-scalable=no">，并确保容器没有cursor: pointer以外的交互样式干扰。真正难的不是写几行暂停代码，而是所有中断条件（悬停、触碰、视口进出、页面隐藏）都要共享同一套状态机，且每次恢复都得从精确的像素位置继续——差 1px 都可能造成文字跳帧或重叠。
- 观察器回调中，根据
