深入分析element ScrollBar滚动组件源码

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

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;
 }
 }
 
 ...
}

import Vue from 'vue';

let scrollBarWidth;

export default function() {
 if (Vue.prototype.$isServer) return 0;
 if (scrollBarWidth !== undefined) return scrollBarWidth;

 const outer = document.createElement('div');
 outer.className = 'el-scrollbar__wrap';
 outer.style.visibility = 'hidden';
 outer.style.width = '100px';
 outer.style.position = 'absolute';
 outer.style.top = '-9999px';
 document.body.appendChild(outer);

 const widthNoScroll = outer.offsetWidth;
 outer.style.overflow = 'scroll';

 const inner = document.createElement('div');
 inner.style.width = '100%';
 outer.appendChild(inner);

 const widthWithScroll = inner.offsetWidth;
 outer.parentNode.removeChild(outer);
 scrollBarWidth = widthNoScroll - widthWithScroll;

 return scrollBarWidth;
};

// 生成view节点，并且将默认slots内容插入到view节点下
const view = h(this.tag, {
 class: ['el-scrollbar__view', this.viewClass],
 style: this.viewStyle,
 ref: 'resize'
}, this.$slots.default);

// 生成wrap节点，并且给wrap绑定scroll事件
const wrap = (
 <div
 	ref="wrap"
 	style={ style }
		onScroll={ this.handleScroll }
		class={ [this.wrapClass, 'el-scrollbar__wrap', gutter "htmlcode">

let nodes;

if (!this.native) {
 nodes = ([
 wrap,
 <Bar
 	move={ this.moveX }
			size={ this.sizeWidth }></Bar>,
		<Bar
  vertical
  move={ this.moveY }
  size={ this.sizeHeight }></Bar>
	]);
} else {
 nodes = ([
 <div
  ref="wrap"
  class={ [this.wrapClass, 'el-scrollbar__wrap'] }
			style={ style }>
 			 { [view] }
		</div>
	]);
}
return h('div', { class: 'el-scrollbar' }, nodes);


可以看到如果native为false，则使用自定义的滚动条，如果为true，则不使用自定义滚动条。简化上面的render函数生成的HTML如下：


<div class="el-scrollbar">
 <div class="el-scrollbar__wrap">
 <div class="el-scrollbar__view">
 	this.$slots.default
 </div>
 </div>
 <Bar vertical move={ this.moveY } size={ this.sizeHeight } />
 <Bar move={ this.moveX } size={ this.sizeWidth } />
</div>


最外层的el-scrollbar设置了overflow:hidden,用来隐藏wrap中产生的浏览器原生滚动条。使用ScrollBar组建时，写在ScrollBar组件中的内容都将通过slot分发到view内部。另外这里使用move，size和vertical三个接口调用了Bar组件，这个组件就是原理图上的Track和Thumb了。下面我们来看一下Bar组件：


props: {
 vertical: Boolean, // 当前Bar组件是否为垂直滚动条
 size: String, // 百分数，当前Bar组件的thumb长度 / track长度的百分比 
 move: Number // 滚动条向下/向右发生transform: translate的值
},


Bar组件的行为都是由这三个接口来进行控制的，在前面的分析中，我们可以看到，在scrollbar中调用Bar组件时，分别传入了这三个props。那么父组件是如何初始化以及更新这三个参数的值，从而达到更新Bar组件的呢。首先在mounted钩子中调用update方法对size进行初始化：


update() {
 let heightPercentage, widthPercentage;
 const wrap = this.wrap;
 if (!wrap) return;

 heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
 widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);

 this.sizeHeight = (heightPercentage < 100) "htmlcode">

handleScroll() {
 const wrap = this.wrap;

 this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
 this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
}


moveX/moveY用来控制滚动条的滚动位置，当这个值传给Bar组件时，Bar组件render函数中会调用 renderThumbStyle 方法将它转化为trumb的样式 transform: translateX(${moveX}%) / transform: translateY(${moveY}%) 。由之前分析的相似关系可知，当wrap.scrollTop正好等于wrap.clientHeight的时候，此时thumb应该向下滚动它自身长度的距离，也就是transform: translateY(100%)。所以，当wrap滚动的时候，thumb应该向下滚动的距离正好是 transform: translateY(wrap.scrollTop / wrap.clientHeight )。这就是wrap滚动函数handleScroll中的逻辑所在。
现在我们已经完全弄清楚了scrollbar组件中的所有逻辑，接下来我们再看看Bar组件在接收到props之后是如何处理的。


render(h) {
 const { size, move, bar } = this;

 return (
 <div
  class={ ['el-scrollbar__bar', 'is-' + bar.key] }
  onMousedown={ this.clickTrackHandler } >
  <div
  ref="thumb"
  class="el-scrollbar__thumb"
  onMousedown={ this.clickThumbHandler }
  style={ renderThumbStyle({ size, move, bar }) }>
  </div>
 </div>
 );
}


render函数获取父组件传递的size，move之后，通过 renderThumbStyle 来生成thumb,并且给track和thumb分别绑定了onMousedown事件。


clickThumbHandler(e) {
 this.startDrag(e);
 // 记录this.y , this.y = 鼠标按下点到thumb底部的距离
 // 记录this.x , this.x = 鼠标按下点到thumb左侧的距离
 this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
},
 
// 开始拖拽函数
startDrag(e) {
 e.stopImmediatePropagation();
 // 标识位， 标识当前开始拖拽
 this.cursorDown = true;

 // 绑定mousemove和mouseup事件
 on(document, 'mousemove', this.mouseMoveDocumentHandler);
 on(document, 'mouseup', this.mouseUpDocumentHandler);
 
 // 解决拖动过程中页面内容选中的bug
 document.onselectstart = () => false;
},
 
mouseMoveDocumentHandler(e) {
 // 判断是否在拖拽过程中，
 if (this.cursorDown === false) return;
 // 刚刚记录的this.y(this.x) 的值
 const prevPage = this[this.bar.axis];

 if (!prevPage) return;

 // 鼠标按下的位置在track中的偏移量，即鼠标按下点到track顶部(左侧)的距离
 const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
 // 鼠标按下点到thumb顶部(左侧)的距离
 const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
 // 当前thumb顶部（左侧）到track顶部（左侧）的距离，即thumb向下（向右）偏移的距离 占track高度（宽度）的百分比
 const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
	// wrap.scrollHeight / wrap.scrollLeft * thumbPositionPercentage得到wrap.scrollTop / wrap.scrollLeft
 // 当wrap.scrollTop(wrap.scrollLeft)发生变化的时候，会触发父组件wrap上绑定的onScroll事件，
 // 从而重新计算moveX/moveY的值，这样thumb的滚动位置就会重新渲染
 this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
},

mouseUpDocumentHandler(e) {
 // 当拖动结束，将标识位设为false
 this.cursorDown = false;
 // 将上一次拖动记录的this.y(this.x)的值清空
 this[this.bar.axis] = 0;
 // 取消页面绑定的mousemove事件
 off(document, 'mousemove', this.mouseMoveDocumentHandler);
 // 清空onselectstart事件绑定的函数
 document.onselectstart = null;
}


上面的代码就是thumb滚动条拖拽的所有处理逻辑，整体思路就是在拖拽thumb的过程中，动态的计算thumb顶部（左侧）到track顶部（左侧）的距离占track本身高度（宽度）的百分比，然后利用这个百分比动态改变wrap.scrollTop的值，从而触发页面滚动以及滚动条位置的重新计算，实现滚动效果。

上一个图方便大家理解吧(￣▽￣)"

  
track的onMousedown和trumb的逻辑也差不多，有两点需要注意：
  
track的onMousedown事件回调中不会给页面绑定mousemove和mouseup事件，因为track相当于click事件 在track的onmousedown事件中，我们计算thumb顶部到track顶部的方法是，用鼠标点击点到track顶部的距离减去thumb的二分之一高度，这是因为点击track之后，thumb的中点刚好要在鼠标点击点的位置。

至此，整个scrollbar源码就分析结束了，回过头来看看，其实scrollbar的实现并不难，主要还是要理清各种滚动关系、thumb的长度以及滚动位置怎么通过wrap，view之间的关系来确定。这一部分可能比较绕，没搞懂的同学建议自己手动画画图研究一下，只要搞懂这个滚动原理，实现起来就很简单了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。