HTML5怎样让滚动文字按条件停止_JS监听事件中断动画【详解】-html教程

用 requestAnimationFrame 控制 scrollLeft 实现可控启停：维护 isPaused 状态和 animationId，暂停时 cancelAnimationFrame 并冻结 scrollLeft，恢复时从断点续播；需兼容 mouseenter、touchstart、IntersectionObserver 及页面可见性变化。

滚动文字如何用 scrollLeft + setInterval 实现可控启停

纯 CSS 的 已被废弃，现代做法必须用 JS 控制 DOM 元素的 scrollLeft（水平）或 scrollTop（垂直）。核心是手动驱动位移：每帧递增偏移量，再用 requestAnimationFrame 或 setInterval 循环执行。关键不是“怎么动”，而是“怎么随时停”——停的本质是清除定时器或中断帧循环。

常见错误是只设了 clearInterval(timer) 却没重置 scrollLeft，导致下次启动时从中间位置突跳；或者在鼠标移入时暂停但未保存当前速度状态，移出后直接加速。

• 推荐用 requestAnimationFrame 替代 setInterval，更精准且页面切后台时自动暂停
• 必须缓存当前 scrollLeft 值和方向（正/负），暂停时冻结，恢复时继续累加
• 若滚动容器是 overflow: hidden 的父元素，动画目标必须是其子元素（如
  ），不能直接动父容器自身

  监听 mouseenter / mouseleave 中断滚动的正确写法

  鼠标悬停暂停是最常用条件，但直接绑定 mouseenter 并调用 cancelAnimationFrame 不够——需区分“暂停中再次悬停”和“已暂停时移出”的状态，否则会重复清除或漏恢复。

  典型结构是用一个布尔变量 isPaused 标记状态，并在事件回调里做判断：

  立即学习“前端免费学习笔记（深入）”；

  let isPaused = false;
  let animationId = null;
  function animate() {
  if (!isPaused) {
  container.scrollLeft += 1;
  // 到头了就回滚
  if (container.scrollLeft >= scroller.scrollWidth - container.clientWidth) {
  container.scrollLeft = 0;
  }
  }
  animationId = requestAnimationFrame(animate);
  }
  container.addEventListener('mouseenter', () => {
  isPaused = true;
  });
  container.addEventListener('mouseleave', () => {
  if (isPaused) {
  isPaused = false;
  animate(); // 重新触发一帧，避免卡死
  }
  });
  

  注意：不要在 mouseleave 里直接调 requestAnimationFrame(animate)，必须先重置 isPaused，否则下一轮 animate() 还会因条件不满足而跳过执行。

  IntersectionObserver 滚动进入视口才启动的场景适配

  当页面有多个滚动字幕、且希望“只加载可视区域内的”时，mouseenter 就失效了——用户可能滚动进页面而非鼠标悬停。这时要用 IntersectionObserver 监听元素是否在视口内。