深入分析element 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是如何实现这些逻辑的。

main.js文件中直接导出一个对象，这个对象采用render函数的方式渲染scrollbar组件，组件对外暴漏的接口如下：

props: { native: Boolean, // 是否采用原生滚动（即只是隐藏掉了原生滚动条，但并没有使用自定义的滚动条） wrapStyle: {}, // 内联方式 自定义wrap容器的样式 wrapClass: {}, // 类名方式 自定义wrap容器的样式 viewClass: {}, // 内联方式 自定义view容器的样式 viewStyle: {}, // 类名方式 自定义view容器的样式 noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能 tag: { 				// view容器用那种标签渲染，默认为div type: String, default: 'div' }}

可以看到，这就是整个ScrollBar组件对外暴露的接口，主要包括了自定义wrap,view样式的接口，以及用来优化性能的noresize接口。

然后我们再来分析一下render函数：

render(){	let gutter = scrollbarWidth(); // 通过scrollbarWidth()方法 获取浏览器原生滚动条的宽度 let style = this.wrapStyle; if (gutter) { const gutterWith = `-${gutter}px`;  // 定义即将应用到wrap容器上的marginBottom和marginRight,值为上面求出的浏览器滚动条宽度的负值 const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`; // 这一部分主要是根据接口wrapStyle传入样式的数据类型来处理style,最终得到的style可能是对象或者字符串 if (Array.isArray(this.wrapStyle)) {  style = toObject(this.wrapStyle);  style.marginRight = style.marginBottom = gutterWith; } else if (typeof this.wrapStyle === 'string') {  style += gutterStyle; } else {  style = gutterStyle; } }  ...}