如何详细剖析element UI中的滚动条组件源代码？

本文共计2494个文字，预计阅读时间需要10分钟。

scrollbar组件位于根目录下，包含index.js文件和src文件夹。index.js用于注入Vue插件，具体作用不明，理解起来像童言童语。建议查阅Vue官方文档中的插件部分，src目录下的内容才是scrollbar组件的核心。

scrollbar组件根目录下包括index.js文件和src文件夹，index.js是用来注册Vue插件的地方，没什么好说的，不了解的童鞋可以看一下Vue官方文档中的插件，src目录下的内容才是scrollbar组件的核心代码，其入口文件是main.js。

在开始分析源码之前，我们先来说一下自定义滚动条的原理，方便大家更好的理解。

如图，黑色wrap为滚动的可显示区域，我们的滚动内容就是在这个区域中滚动，view是实际的滚动内容，超出wrap可显示区域的内容都将被隐藏。右侧track是滚动条的滚动滑块thumb上下滚动的轨迹

当wrap中的内容溢出的时候，就会产生各浏览器的原生滚动条，要实现自定义滚动条，我们必须将原生滚动条消灭掉。假设我们给wrap外面再包一层div，并且把这个div的样式设为 overflow:hidden ，同时我们给wrap的marginRight,marginBottom设置一个负值，值得大小正好等于原生滚动条的宽度，那么这个时候由于父容器的overflow:hidden属性，正好就可以将原生滚动条隐藏掉。