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开发中常见的套路和技巧总结
Nov 24 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue elementUI批量上传文件
Apr 26 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
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
jQuery操作cookie
2016/08/08 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python图像常规操作
2017/11/11 Python
python自动裁剪图像代码分享
2017/11/25 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
岗位职责怎么写
2014/03/14 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
理财计划书
2014/08/14 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
公诉意见书范文
2015/06/05 职场文书
《风娃娃》教学反思
2016/02/18 职场文书