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

最新推荐文章于 2024-04-28 15:42:08 发布

Dreams.*

最新推荐文章于 2024-04-28 15:42:08 发布

阅读量1.6k

点赞数 1

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_54126505/article/details/129751017

版权

其实主要是通过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>

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方法，监控滚动条变化