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


Posted in Vue.js onDecember 13, 2020

本文实例为大家分享了vue实现两个区域滚动条同步滚动的具体代码,供大家参考,具体内容如下

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

这是效果图:

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

要点分析:

其实主要是通过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事件传入该属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
You might like
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
详解python程序中的多任务
2020/09/16 Python
Django实现随机图形验证码的示例
2020/10/15 Python
医学专业毕业生个人求职信
2013/12/25 职场文书
物理研修随笔感言
2014/02/14 职场文书
群众路线调研报告范文
2014/11/03 职场文书
趣味运动会口号
2015/12/24 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Python pyecharts绘制条形图详解
2022/04/02 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS