如何修改JS拖拽滑块脚本 实现类名绑定多滑块独立正常工作

原脚本多滑块失效的核心原因是两点：一是HTML重复使用相同ID不符合规范，getElementById仅会返回第一个匹配元素；二是原JS逻辑为单元素设计，状态和事件全局共享，多滑块会出现状态冲突。以下是完整修改方案：

移除重复ID，给所有滑块容器统一添加类名drag-scroll-container：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>HTML DOM - Drag to scroll</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
  <div class="drag-scroll-container" style="overflow: auto; padding: 1rem">
    <div class="item"><small>12</small></div>
    <!-- 省略重复item结构 -->
  </div>
  <div class="drag-scroll-container" style="overflow: auto; padding: 1rem">
    <div class="item"><small>12</small></div>
    <!-- 省略重复item结构 -->
  </div>
</body>
</html>

将原ID选择器替换为类选择器：

.drag-scroll-container {
  margin: 50px auto;
  border: 2px solid #ccc;
  border-radius: 10px;
  display: flex;
  width: 80%;
  gap: 1rem;
}
.item {
  border: 1px solid #cbd5e0;
  font-size: 2.25rem;
}
small {
  width: 150px;
  height: 150px;
  align-items: center;
  display: flex;
  justify-content: center;
}

遍历所有匹配类名的滑块，每个滑块单独初始化独立的状态和事件监听，避免状态冲突：

document.addEventListener('DOMContentLoaded', function () {
  // 获取所有拖拽滑块容器
  const sliders = document.querySelectorAll('.drag-scroll-container');
  
  // 逐个初始化每个滑块
  sliders.forEach(ele => {
    ele.style.cursor = 'grab';
    // 每个滑块独立存储位置状态，互不干扰
    let pos = { top: 0, left: 0, x: 0, y: 0 };

    const mouseDownHandler = function (e) {
      ele.style.cursor = 'grabbing';
      ele.style.userSelect = 'none';
      pos = {
        left: ele.scrollLeft,
        top: ele.scrollTop,
        x: e.clientX,
        y: e.clientY,
      };
      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = function (e) {
      const dx = e.clientX - pos.x;
      const dy = e.clientY - pos.y;
      ele.scrollTop = pos.top - dy;
      ele.scrollLeft = pos.left - dx;
    };

    const mouseUpHandler = function () {
      ele.style.cursor = 'grab';
      ele.style.removeProperty('user-select');
      document.removeEventListener('mousemove', mouseMoveHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    };

    ele.addEventListener('mousedown', mouseDownHandler);
  })
});

修改后页面中所有添加了drag-scroll-container类名的容器都可以独立实现拖拽滚动功能，没有数量限制。

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