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

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

要点分析：

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

<div class="customer-span" ref="systemForm" @scroll="sysHandleScroll()">
  <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()">
  <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部分

sysHandleScroll() {
  this.$refs.externalForm.scrollTop = this.$refs.systemForm.scrollTop
},
exterHandleScroll() {
  this.$refs.systemForm.scrollTop = this.$refs.externalForm.scrollTop
}

步骤解析：

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

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

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

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

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