Vuescroll – 一个基于Vue的虚拟滚动条

仔细查看dom, 发现H+ 左侧菜单的旁边有一个小的DIV, 我拖动的, 菜单竟然也能滚动, 我明白了, 这是用的虚拟滚动条, 我感觉这个挺不错的, 后来查看这个虚拟滚动条的源码, 发现是一个款叫做SlimScroll的基于jquery的库。由于我对Vue比较熟悉,所以,我想用Vue做一个类似的。

不断踩坑

一开始用slimScroll的方法并不理想, slimscroll的滚动内容的方法是:

  1. 监听滚轮事件,根据滚动每次滚动的距离,然后计算内容滑动的距离。
  2. 监听拖动滚动把手的事件,通过拖动滚动把手的距离来滑动内容的距离。

这有个2致命的缺点:

  1. 不能平滑的滚动, 什么叫不能平滑地滚动? 就是滚动到目标的点没有一个过度的效果, 一下子就突然到目的地了。
  2. 在手机端上的时候, 当手指滑动离开滚动内容的时候, 内容不能继续滚动!

这两点带来了极差的UI体验!

后来, 我无意中发现了element-ui也是使用了虚拟滚动条, 并且效果很好, 尤其是在手机端滑动, 每次滑动结束手离开屏幕都能继续滑行一段距离, 比slimscroll效果要好,于是我就去element-ui的github上翻scrollbar的源码, 通过阅读源码, 我发现element-ui触发滚动的时机是在onscroll的时候, 也就是说, 把滚动内容的父元素设置为overflow:scroll, 然后监听父元素的onScroll事件, 在onScroll事件的callback里面移动滚动内容即可。 经过我的一番改进, 终于能做到和element-ui滚动条滚动的一个效果了。

猜你喜欢

转载自www.cnblogs.com/lupingruanjian/p/9668493.html