vue2实现滚动窗口同步滚动

Frank原创
  • 开发笔记
  • Vue2
  • vue2
大约 1 分钟约 305 字...

项目开发中,遇到一个比较两个表单差异的需求,但当item过多就需要滚动条,这里就用到了滚动条同步的地方。

这是实现效果:

See the Pen by zhangfanhang on CodePen.

虽然demo中是表格但是实现起来是一样的,其实主要是通过ref属性来操控两个divscrollTop属性

因为对两个 div 都添加了scroll方法,一个区域滚动会改变另外一个区域的scrollTop,但是同时触发了另外一个区域自己的scroll方法,又会进行改变,这样就形成了两个scroll的无限回调。

解决思路:大致思路是添加一个flag属性,两个 scroll 事件分别传入不同的值,再根据这个值去判断是否设置scrollTop属性,这样就不会造成无线回调,这里的flag属性需要在scroll事件之前传入,所以这里通过mouserover事件传入该属性。

还要注意的是如果直接给el组件绑定原生时间需要加native修饰符。

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1