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

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

要点分析：

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

  

    
      
        {
    { systemFormData[item.model] }}
      
    
  


  

    
      
        {
    { externalFormData[item.model] }}
      
     
  

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事件传入该属性

最新代码更新

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