如何通过单个事件处理器同步滚动3个class为container的元素

你的需求是让三个.container元素的水平滚动条同步，当其中一个滚动时，另外两个也跟着滚动到相同位置。先梳理下你现有代码的问题，再给出优化后的实现方案：

现有代码的问题 #

• 使用非标准属性event._vts获取滚动位置，应该用标准的scrollLeft属性
• 重复调用document.getElementsByClassName('container')，多次查询DOM会降低性能
• graficas数组的逻辑冗余且混乱，没必要先填充再移除第一个元素
• 滚动事件会被所有容器触发，导致重复执行同步逻辑，可能引发循环滚动

优化后的实现方案 #

1. 脚本部分（Vue 3/2 通用逻辑） #

// 存储所有container元素
let containers: HTMLElement[] = [];

// 组件挂载时获取所有container元素
mounted() {
  containers = Array.from(document.getElementsByClassName('container')) as HTMLElement[];
}

function handleScroll(event: Event) {
  const target = event.target as HTMLElement;
  // 获取当前滚动的水平位置
  const scrollLeft = target.scrollLeft;

  // 遍历所有容器，同步滚动位置，排除当前触发事件的容器避免循环
  containers.forEach(container => {
    if (container !== target) {
      // 使用scrollTo设置位置，避免scrollBy的累积问题
      container.scrollTo({
        left: scrollLeft,
        top: 0,
        behavior: 'auto' // 保持默认滚动行为，不需要平滑
      });
    }
  });
}

2. 模板部分 #

模板保持你的结构不变，每个.container绑定handleScroll事件：

<h2>CPU</h2>
<div class="container" @scroll="handleScroll">
  <div class="containerBody">
    <Bar :data="cpu" :options="options" />
  </div>
</div>
<h2>IO</h2>
<div class="container" @scroll="handleScroll">
  <div class="containerBody">
    <Bar :data="io" :options="options" />
  </div>
</div>
<h2>SEC</h2>
<div class="container" @scroll="handleScroll">
  <div class="containerBody">
    <Bar :data="sec" :options="options" />
  </div>
</div>

关键说明 #

• 组件挂载时一次性获取所有.container元素，存在数组中，后续直接使用，减少DOM查询
• 使用scrollLeft获取当前滚动的水平位置，这是标准DOM属性，兼容性更好
• 同步滚动时排除当前触发事件的容器，避免事件循环触发导致的性能问题或异常
• 使用scrollTo而非scrollBy，因为scrollBy是累加滚动，而我们需要精确设置到目标位置

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