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项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
常用js脚本
2006/12/03 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python判断两个对象相等的原理
2017/12/12 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
set在python里的含义和用法
2019/06/24 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python实现与redis交互操作详解
2020/04/21 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
自动化专业本科毕业生求职信
2013/10/20 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
行政人员岗位职责
2013/12/08 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
python实现层次聚类的方法
2021/11/01 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android