本文例項為大家分享了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事件傳入該屬性。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。