如何全面解析element UI ScrollBar组件源码的编写与优化技巧？

本文共计2490个文字，预计阅读时间需要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属性，正好就可以将原生滚动条隐藏掉。然后我们再将自定义的滚动条绝对定位到wrap容器的右侧和下侧，并加上滚动、拖拽事件等滚动逻辑，就可以实现自定义滚动条了。

接下来我们从main.js入口开始，详细分析一下element是如何实现这些逻辑的。