如何在mouseleave时终止mouseenter触发的setInterval以停止div滚动？

你的代码核心问题出在定时器变量的作用域和重复创建定时器上，导致鼠标离开时无法正确停止滚动，还干扰了手动操作：

1. timer 是 scroll_right 函数内部的局部变量，kill 函数根本访问不到它，所以 clearInterval(timer) 完全不起作用
2. 每次触发 mouseenter 都会调用 scroll_right，而函数内又会新建一个定时器，最终导致多个定时器同时运行，滚动停不下来
3. 持续运行的定时器会不断修改 scrollLeft，覆盖你手动滚动的操作

修复后的代码 #

首先调整JavaScript部分，把定时器变量提到外层作用域，同时避免重复创建定时器：

// 把定时器变量放在外层作用域，让两个函数都能访问
let scrollTimer = null;

function scroll_right() {
  // 如果已经有定时器在运行，直接返回，避免重复叠加
  if (scrollTimer) return;
  
  const elmnt = document.getElementsByClassName("thumbnails")[0];
  // 先执行一次滚动，避免鼠标悬停后有延迟感
  elmnt.scrollLeft += 50;
  
  // 保存定时器引用到全局变量
  scrollTimer = setInterval(() => {
    elmnt.scrollLeft += 50;
  }, 300);
}

function kill() {
  // 清理定时器，并重置变量，确保下次悬停能正常创建新定时器
  if (scrollTimer) {
    clearInterval(scrollTimer);
    scrollTimer = null;
  }
}

HTML部分无需改动，保持原箭头元素即可：

<img class="arrow" onmouseenter="scroll_right()" onmouseleave="kill()" src="https://image.flaticon.com/icons/svg/126/126490.svg">

额外优化建议（可选） #

• 可以把滚动步长（50）和间隔时间（300）改成可配置的变量，方便灵活调整滚动速度
• 如果需要支持左右双向滚动，可以把滚动方向作为参数传入函数，避免重复编写相似代码

内容的提问来源于stack exchange，提问作者Maxim Andrewson