如何为所有同class的div绑定事件监听器？解决仅首个元素生效问题

你遇到的问题很典型——document.querySelector(".scroll-x")只会返回第一个匹配到的元素，所以你的事件监听器只绑定在了第一个div上。要让所有带.scroll-x类的div都生效，我们需要获取所有匹配元素并逐个绑定事件，具体方案如下：

核心修改思路 #

1. 用document.querySelectorAll()替代querySelector，获取所有.scroll-x元素
2. 将事件绑定逻辑封装成独立函数，确保每个元素拥有独立的状态变量（避免多个元素共用变量导致冲突）
3. 遍历所有元素，为每个元素调用事件绑定函数

修改后的完整代码 #

// 获取所有带.scroll-x类的div元素
const scrollAreas = document.querySelectorAll(".scroll-x");

// 封装横向滚动的事件绑定逻辑
function setupScrollHorizontal(scrollArea) {
  let isDown = false;
  let startX;
  let scrollLeft;

  scrollArea.addEventListener("mousedown", (e) => {
    isDown = true;
    scrollArea.classList.add("active");
    startX = e.pageX - scrollArea.offsetLeft;
    scrollLeft = scrollArea.scrollLeft;
  });

  scrollArea.addEventListener("mouseleave", () => {
    isDown = false;
    scrollArea.classList.remove("active");
  });

  scrollArea.addEventListener("mouseup", () => {
    isDown = false;
    scrollArea.classList.remove("active");
  });

  scrollArea.addEventListener("mousemove", (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - scrollArea.offsetLeft;
    const walk = (x - startX) * 3; // 控制滚动速度
    scrollArea.scrollLeft = scrollLeft - walk;
  });
}

// 遍历所有元素，为每个元素绑定事件
scrollAreas.forEach(setupScrollHorizontal);

关键细节说明 #

• querySelectorAll()返回一个NodeList集合，我们可以用forEach()遍历它
• 每个元素调用setupScrollHorizontal时，都会创建独立的isDown、startX、scrollLeft变量，避免多个元素之间的状态干扰
• 封装函数让代码更易维护，如果后续需要修改滚动逻辑，只需要改动这一个函数即可

内容的提问来源于stack exchange，提问作者Vinay Kashyap