木灵鱼儿

木灵鱼儿

阅读:152

最后更新:2022/10/16/ 19:51:06

实现一个自定义虚拟滚动条

根据element框架的el-scrollbar来实现的,根据官方源码自己写了一版,用于了解该功能的实现。

要点:

  1. 通过margin的负值以及不定宽高的父级元素verflow: hidden实现隐藏滚动条
  2. 真实的滚动条被隐藏后实现一个自己的滚动条(点击滚动滑轨滚动和拖拽滑块滚动)
  3. 实现一个div的resize事件监听来动态更新虚拟滚动条的大小

其中最难的就是拖拽滑块滚动,那个算法真的看不懂,反正照抄了,由于不是很有时间研究,所以没有对移动端的touch事件进行兼容。

参考文章: Element-ui el-scrollbar 源码解析

本人仓库:CustomScrollBar

效果展示:

总结:

个人的实现肯定是没有现在那些有名的插件实现的那么好,但是有助于我们理解它的实现,这样在使用其他插件的时候,也可以很快的明白其用意和原理。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 152

相关文章

目录树