vue滚动条滚动事件,vue滚动到指定位置,有滚动效果
本文主要详细介绍了vue在两个方面实现滚动条的同步滚动。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现两个区域滚动条同步滚动的具体代码，供大家参考。具体内容如下
在项目的开发中，需要比较两个表格之间的差异，但是当项目太多时，就需要滚动条。这里，我们使用滚动条同步的地方。其实原理和git差不多。这里分析一下。
这是效果图：
要点分析：
实际上，两个div的scrollTop属性主要由ref属性控制。
div class= customer-span ref= system form @ scroll= sysHandleScroll() @ mouse over= change flag(false)
div class=客户-span-表单
El-form label-suffix=: class= form-static label-position= right label-
宽度= 100像素
el-form-item v-for=(item，index)in formItem :key= index :label= item . label
{{ systemFormData[item.model] }}
/El-表单-项目
/el格式
/div
/div
div class= customer-span ref= external form @ scroll= exthandlescroll() @ mouse over= change flag(true)
div class=客户-span-表单
El-form label-suffix=: class= form-static label-position= right label-
宽度= 100像素
el-form-item v-for=(item，index)in formItem :key= index :label= item . label
{ { external formdata[item . model]} }
/El-表单-项目
/el格式
/div
/div
Js零件
data() {
返回{
标志：假
}
},
方法：{
changeFlag(flag) {
this.flag=flag
},
//左右滚动条的滚动同步
sysHandleScroll() {
如果(！this.flag) {
这个。$ refs . external form . scroll top=this。$refs.systemForm.scrollTop
}
},
exthandlescroll(){
if (this.flag) {
这个。$ refs . system form . scroll top=this。$refs.externalForm.scrollTop
}
}
}
步骤解析：
1.首先你要为你的两个div设置一个固定的高度，滚动条分别出现。
2.然后，将ref属性分别绑定到两个div。
3.接下来，在两个div中添加scroll方法来监视滚动条的变化。
4.最后，在方法中设置两个滚动条的相同scrollTop值。
2020/7/31更新，解决滚轮滑动滚动条移动缓慢问题
感谢评论区的小伙伴们发现的bug，下面是原因和解决方法。
原因：因为两个div都加了scroll方法，所以在一个区域滚动会改变另一个区域的scrollTop，但同时又触发了自己的scroll方法，又会被改变，这样就形成了两个scroll的无限回调，最后出现了看到的结果，移动很慢。
解决方法：总体思路是添加一个flag属性，两个scroll事件传入不同的值，然后根据这个值判断是否设置scrollTop属性，以免造成无线循环。这里的flag属性需要在scroll事件之前传入，所以这个属性是通过mouserover事件传入的。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。