添加循环后拖拽滚动滑块功能失效，如何适配多滑块？

原代码存在两个核心问题导致多滑块场景下功能失效：

1. document.querySelector仅返回第一个匹配的滑块元素，后续滑块不会被绑定事件；
2. 全局状态变量（isDown、startX、scrollLeft）被所有滑块共享，拖拽操作时状态会互相干扰。

修改后的代码如下，让每个滑块拥有独立的拖拽状态和事件绑定：

// 获取页面中所有目标拖拽滑块
const scrollSliders = document.querySelectorAll(".scroll-slider1, .scroll-slider2");

// 遍历每个滑块，为其单独绑定拖拽滚动逻辑
scrollSliders.forEach(slider => {
  // 每个滑块独立维护自身的拖拽状态
  let isDown = false;
  let startX;
  let scrollLeft;

  slider.addEventListener('mousedown', (e) => {
    e.preventDefault();
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX;
    scrollLeft = slider.scrollLeft;
  });

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

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

  slider.addEventListener('mousemove', (e) => {
    e.preventDefault();
    if (!isDown) return;
    const x = e.pageX;
    const scroll = x - startX;
    slider.scrollLeft = scrollLeft - scroll;
  });
});

关键修改说明 #

• 使用querySelectorAll获取所有匹配的滑块元素，确保页面中符合选择器的滑块都被处理；
• 通过forEach遍历滑块，将状态变量定义在遍历的回调作用域内，保证每个滑块拥有独立的拖拽状态；
• 所有事件回调中操作当前遍历的slider实例，替代之前的全局元素引用，避免跨滑块的状态污染。

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