当前位置：首页 > VUE

vue实现双向滚动

2026-01-19 00:44:08VUE

实现双向滚动的 Vue 方法

双向滚动通常指两个关联的滚动区域（如表格的头部和内容部分）同步滚动。以下是几种实现方式：

使用事件监听和 scroll 方法

通过监听一个滚动区域的 scroll 事件，同步另一个区域的滚动位置。

<template>
  <div class="scroll-container">
    <div class="header" ref="header" @scroll="syncScroll('header')">
      <!-- 头部内容 -->
    </div>
    <div class="content" ref="content" @scroll="syncScroll('content')">
      <!-- 内容区域 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    syncScroll(type) {
      const source = this.$refs[type];
      const target = type === 'header' ? this.$refs.content : this.$refs.header;
      target.scrollLeft = source.scrollLeft;
    }
  }
};
</script>

<style>
.scroll-container {
  display: flex;
  flex-direction: column;
}
.header, .content {
  overflow-x: auto;
}
</style>

使用自定义指令

封装一个自定义指令简化双向滚动的逻辑。

Vue.directive('sync-scroll', {
  inserted(el, binding, vnode) {
    const target = binding.value;
    el.addEventListener('scroll', () => {
      document.querySelector(target).scrollLeft = el.scrollLeft;
    });
  }
});

<template>
  <div>
    <div v-sync-scroll="'.content'" class="header">
      <!-- 头部 -->
    </div>
    <div v-sync-scroll="'.header'" class="content">
      <!-- 内容 -->
    </div>
  </div>
</template>

使用第三方库

对于复杂场景，可使用现成库如 vue-scroll-sync：

vue实现双向滚动

npm install vue-scroll-sync

import VueScrollSync from 'vue-scroll-sync';

Vue.use(VueScrollSync);

<template>
  <div v-scroll-sync>
    <div class="section-1">
      <!-- 区域1 -->
    </div>
    <div class="section-2">
      <!-- 区域2 -->
    </div>
  </div>
</template>