vue实现滚动条联动（一个滚动条控制两个或多个）

在Vue中实现滚动条联动，可以通过监听一个滚动条的滚动事件，并更新其他滚动条的滚动位置。以下是一个简单的例子：

<template>
  <div>
    <div class="scroll-container" @scroll="handleScroll">
      <div class="content">
        <!-- 内容足够多，可以滚动 -->
      </div>
    </div>
    <div class="sync-scroll-container" ref="syncScrollContainers">
      <!-- 需要联动滚动的容器，可以有多个 -->
    </div>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleScroll(event) {
      const scrollTop = event.target.scrollTop;
      this.syncScrollContainers.forEach((container) => {
        container.scrollTop = scrollTop;
      });
    }
  },
  mounted() {
    this.syncScrollContainers = this.$refs.syncScrollContainers;
  },
  data() {
    return {
      syncScrollContainers: []
    };
  }
};
</script>
 
<style>
.scroll-container {
  overflow-y: scroll;
  height: 300px; /* 根据需要设置高度 */
}
.content {
  height: 1000px; /* 根据内容设置高度 */
}
.sync-scroll-container {
  overflow-y: scroll;
  height: 300px; /* 根据需要设置高度 */
}
</style>

在这个例子中，.scroll-container 是主要的滚动容器，它在滚动时会更新 .sync-scroll-container 容器的滚动位置。.sync-scroll-container 可以有多个，它们都会被同步滚动。

请注意，这个例子中的联动是简单的同步滚动，没有考虑平滑滚动或其他复杂的滚动行为。如果需要更复杂的联动效果，可能需要使用更多的逻辑来处理滚动的平滑过渡等问题。