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中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue postcss-px2rem 自适应布局
May 15 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
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python自动化测试实例解析
2014/09/28 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python支付宝支付示例详解
2019/08/22 Python
Python安装whl文件过程图解
2020/02/18 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
对标管理实施方案
2014/03/12 职场文书
初中毕业生感言
2015/07/31 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫