快捷導(dǎo)航

vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)

更新時(shí)間：2020年12月13日 10:29:25 作者：厚積而薄發(fā)1528

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

項(xiàng)目開(kāi)發(fā)中，遇到一個(gè)比較兩個(gè)form差異的需求，但當(dāng)item過(guò)多就需要滾動(dòng)條，這里就用到了滾動(dòng)條同步的地方，其實(shí)原理和git的差異比較差不多，這里來(lái)做一下分析。

這是效果圖：

要點(diǎn)分析：

其實(shí)主要是通過(guò)ref屬性來(lái)操控兩個(gè)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
 },
 // 左右滾動(dòng)條滾動(dòng)同步
 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、首先你要給你的兩個(gè)div設(shè)置固定高度，分別出現(xiàn)滾動(dòng)條

2、然后再通過(guò)給兩個(gè)div分別綁定ref屬性

3、接下來(lái)給兩個(gè)div添加scroll方法，監(jiān)控滾動(dòng)條變化

4、最后分別在方法里設(shè)置兩個(gè)滾動(dòng)條的scrollTop值一樣

2020/7/31更新，解決滾輪滑動(dòng)滾動(dòng)條移動(dòng)緩慢問(wèn)題

感謝評(píng)論區(qū)小伙伴發(fā)現(xiàn)的bug，這里說(shuō)一下原因和解決方案

發(fā)生原因：因?yàn)閷?duì)兩個(gè)div都添加了scroll方法，一個(gè)區(qū)域滾動(dòng)會(huì)改變另外一個(gè)區(qū)域的scrollTop,但是同時(shí)觸發(fā)了這個(gè)區(qū)域自己的scroll方法，又會(huì)進(jìn)行改變，這樣就形成了兩個(gè)scroll的無(wú)限回調(diào)，最終發(fā)生了看到的結(jié)果，移動(dòng)非常緩慢。

解決思路：大致思路是添加一個(gè)flag屬性，兩個(gè)scroll事件分別傳入不同的值，再根據(jù)這個(gè)值去判斷是否設(shè)置scrollTop屬性，這樣就不會(huì)造成無(wú)線循環(huán),這里的flag屬性需要在scroll事件之前傳入，所以這里通過(guò)mouserover事件傳入該屬性。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: