vue中实现滚动条同步滚动

<template>
  <div class="flex">
    <div class="diffCont" ref="leftCont" @scroll="leftScroll"  @mouseover="changeFlag(false)">
      测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据<br />
测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据<br />
    </div>
    <div class="diffCont" ref='rightCont' @scroll="rightScroll" @mouseover="changeFlag(true)">
      测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据<br />
据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
    </div>

  </div>
</template>

<script>
export default {
  name: '',
  props: [''],
  data() {
    return {
      flag: false, // 滚动标识，防止改变scrollLeft时重复触发scroll事件
      proportion: 1 // 设置默认比例为1
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    // 用内容宽度减去容器宽度
    let lwidth = this.$refs.leftCont.scrollWidth- this.$refs.leftCont.clientWidth,
    rwidth = this.$refs.rightCont.scrollWidth- this.$refs.leftCont.clientWidth;
    // 获得左右两侧宽度的比例值，用于解决两边内容宽度不一致导致一侧滚动条拖到最右侧，另一侧滚动条与最右侧还有一段距离问题。
    this.proportionW = lwidth / rwidth;
  },

  methods: {
    changeFlag(flag) {
      this.flag = flag
    },
    // 左右滚动条滚动同步
    leftScroll(e) {
      if (!this.flag) {
        this.$refs.rightCont.scrollLeft = this.$refs.leftCont.scrollLeft / this.proportionW
      }
    },
    rightScroll (e) {
      if (this.flag) {
         this.$refs.leftCont.scrollLeft = this.$refs.rightCont.scrollLeft * this.proportionW
      }
    },
  },

  watch: {},
}
</script>
<style scoped>
.flex {
  display: flex;
  border: 1px solid #ccc;
}
.diffCont {
  flex: 1;
  height: 200px;
  overflow-y: scroll;
  white-space: nowrap;
}
</style>