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

Posted 2021-01-07 lupingruanjian

仔细查看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滚动条滚动的一个效果了。