vue实现两个区域滚动条同步滚动

项目开发中，遇到一个比较两个form差异的需求，但当item过多就需要滚动条，这里就用到了滚动条同步的地方，其实原理和git的差异比较差不多，这里来做一下分析。这是效果图

要点分析：

其实主要是通过ref属性来操控两个div的scrollTop属性

<div class="customer-span" ref="systemForm" @scroll="sysHandleScroll()"  @mouseover="changeFlag(false)">
  <div class="customer-span-form">
    <el-form label-suffix=":" class="form-static" label-position="right" label- 
    width="100px">
      <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label">
        {{ systemFormData[item.model] }}
      </el-form-item>
    </el-form>
  </div>
</div>
<div class="customer-span" ref='externalForm' @scroll="exterHandleScroll()" @mouseover="changeFlag(true)">
  <div class="customer-span-form">
    <el-form label-suffix=":" class="form-static" label-position="right" label- 
    width="100px">
      <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label">
        {{ externalFormData[item.model] }}
      </el-form-item>
     </el-form>
  </div>
</div>

js部分

data() {
  return {
    flag: false
  }
},
method: {
  changeFlag(flag) {
    this.flag = flag
  },
  // 左右滚动条滚动同步
  sysHandleScroll() {
    if (!this.flag) {
      this.$refs.externalForm.scrollTop = this.$refs.systemForm.scrollTop
    }
  },
  exterHandleScroll() {
    if (this.flag) {
      this.$refs.systemForm.scrollTop = this.$refs.externalForm.scrollTop
    }
  }
}

步骤解析：

1、首先你要给你的两个div设置固定高度，分别出现滚动条

2、然后再通过给两个div分别绑定ref属性

3、接下来给两个div添加scroll方法，监控滚动条变化

4、最后分别在方法里设置两个滚动条的scrollTop值一样

2020/7/31更新，解决滚轮滑动滚动条移动缓慢问题

感谢评论区小伙伴发现的bug，这里说一下原因和解决方案

发生原因：因为对两个div都添加了scroll方法，一个区域滚动会改变另外一个区域的scrollTop,但是同时触发了这个区域自己的scroll方法，又会进行改变，这样就形成了两个scroll的无限回调，最终发生了看到的结果，移动非常缓慢。

解决思路：大致思路是添加一个flag属性，两个scroll事件分别传入不同的值，再根据这个值去判断是否设置scrollTop属性，这样就不会造成无线循环,这里的flag属性需要在scroll事件之前传入，所以这里通过mouserover事件传入该属性

最新代码更新

小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟！