多元素同步水平点击拖动滚动器实现问题

问题说明 #

拖动任意一个带.parent类的元素时，需要让所有同类型元素同步水平滚动，但当前代码仅能触发单个元素滚动，其余无响应。

解决方案 #

核心思路是共享拖动状态，并在拖动时同步更新所有滑块的滚动位置：

• 将拖动相关的状态（mouseDown、startX、initialScrollLeft）从单个滑块的作用域提升到全局，让所有滑块共用同一组状态
• 鼠标按下时记录初始滚动位置，鼠标移动时计算滚动偏移量，然后遍历所有滑块统一设置scrollLeft值

修改后的完整代码 #

JavaScript

const sliders = document.querySelectorAll("[id^='parent']");
// 共享拖动状态
let mouseDown = false;
let startX, initialScrollLeft;

const startDragging = function (e) {
  mouseDown = true;
  const slider = this;
  startX = e.pageX - slider.offsetLeft;
  initialScrollLeft = slider.scrollLeft;
};

const stopDragging = function () {
  mouseDown = false;
};

const handleMouseMove = function (e) {
  e.preventDefault();
  if (!mouseDown) return;
  
  const slider = this;
  const x = e.pageX - slider.offsetLeft;
  const scrollOffset = x - startX;
  const targetScrollLeft = initialScrollLeft - scrollOffset;
  
  // 同步所有滑块的滚动位置
  sliders.forEach(s => {
    s.scrollLeft = targetScrollLeft;
  });
};

sliders.forEach((slider) => {
  slider.addEventListener("mousedown", startDragging, false);
  slider.addEventListener("mouseup", stopDragging, false);
  slider.addEventListener("mouseleave", stopDragging, false);
  slider.addEventListener("mousemove", handleMouseMove, false);
});

CSS

.parent {
  width: 300px;
  border: 5px solid red;
  overflow-x: hidden;
  float: left;
  margin-right: 20px; /* 增加间距方便区分滑块 */
}
.child {
  width: 1000px;
  float: left;
  font-size: 15px;
  font-family: arial;
  padding: 10px;
  cursor: pointer;
}

HTML

<div>
  <div class="parent" id="parent1">
    <div class="child">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </div>
  </div>
  <div class="parent" id="parent2">
    <div class="child">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </div>
  </div>
</div>

关键修改点 #

• 把mouseDown、startX、initialScrollLeft从每个滑块的独立变量改为全局共享变量，确保所有滑块使用同一拖动状态
• 在handleMouseMove函数中，计算出目标滚动位置后，遍历所有滑块并设置相同的scrollLeft值，实现同步滚动
• 拆分事件处理函数，让代码结构更清晰易维护

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