当前位置：首页 > VUE

vue 实现滚动联动

2026-03-08 19:57:21VUE

实现滚动联动的基本思路

滚动联动通常指多个可滚动区域（如多个滚动容器或页面不同部分）在滚动时保持同步。Vue中可以通过监听滚动事件并动态调整其他区域的滚动位置来实现。

监听滚动事件

在需要联动的滚动容器上添加@scroll事件监听，获取当前滚动位置：

vue 实现滚动联动

<div class="scroll-container" @scroll="handleScroll">
  <!-- 内容 -->
</div>

methods: {
  handleScroll(event) {
    const scrollTop = event.target.scrollTop
    const scrollLeft = event.target.scrollLeft
    // 存储或传递滚动位置
  }
}

同步滚动位置

通过Vue的响应式数据或状态管理（如Vuex）共享滚动位置：

data() {
  return {
    syncScrollPosition: { top: 0, left: 0 }
  }
},
methods: {
  handleScroll(event) {
    this.syncScrollPosition = {
      top: event.target.scrollTop,
      left: event.target.scrollLeft
    }
  }
}

应用联动滚动

在其他需要联动的容器上监听数据变化并设置滚动位置：

vue 实现滚动联动

watch: {
  syncScrollPosition(newVal) {
    this.$refs.otherContainer.scrollTo(newVal.left, newVal.top)
  }
}

性能优化建议

避免滚动事件高频触发导致的性能问题，可以使用防抖函数：

import { debounce } from 'lodash-es'

methods: {
  handleScroll: debounce(function(event) {
    // 处理逻辑
  }, 50)
}

完整组件示例

<template>
  <div>
    <div class="container" ref="container1" @scroll="syncScroll">
      <!-- 长内容 -->
    </div>
    <div class="container" ref="container2" @scroll="syncScroll">
      <!-- 长内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSyncing: false
    }
  },
  methods: {
    syncScroll(event) {
      if (this.isSyncing) return
      this.isSyncing = true

      const target = event.target
      const otherContainer = 
        target === this.$refs.container1 
          ? this.$refs.container2 
          : this.$refs.container1

      otherContainer.scrollTo({
        top: target.scrollTop,
        left: target.scrollLeft,
        behavior: 'auto'
      })

      requestAnimationFrame(() => {
        this.isSyncing = false
      })
    }
  }
}
</script>

注意事项

需要处理循环触发问题，通过标志位避免无限循环
移动端可能需要考虑touch事件
复杂场景建议使用专用库如vue-scroll-sync

使用第三方库

对于复杂需求，可以使用专门处理滚动联动的库：

npm install vue-scroll-sync

import { ScrollSync } from 'vue-scroll-sync'

export default {
  components: { ScrollSync },
  template: `
    <scroll-sync>
      <div class="container">...</div>
      <div class="container">...</div>
    </scroll-sync>
  `
}

标签: vue