element中ScrollBar滚动组件怎么用

这篇文章将为大家详细讲解有关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;
 }
 }
 
 ...
}

这一块代码中最重要的知识点就是获取浏览器原生滚动条宽度的方式了，为此element专门定义了一个方法scrllbarWidth,这个方法是从外部导入进来的 import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; ，我们一起来看一下这个函数：

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

其实也很简单，就是动态创建一个body的子元素outer，给固定宽度100px，并且将overflow设置为scroll，这样wrap就产生滚动条了，这个时候再动态创建一个outer的子元素inner，将其宽度设置为100%。由于outer有滚动条存在，inner的宽度必然不可能等于outer的宽度，此时用outer的宽度减去inner的宽度，得出的就是浏览器滚动条的宽度了。是不是也很简单啊，最后记得从body中销毁动态创建outer元素哦。

回过头来我们接着看render函数，在根据浏览器滚动条宽度及wrapStyle动态生成样式变量style之后，接下来就是在render函数中生成ScrollBar组件的 HTML了。

// 生成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 = (
 
 		{ [view] }
	
);

接着是根据native来组装wrap,view生成整个HTML节点树了。

let nodes;

if (!this.native) {
 nodes = ([
 wrap,
 ,
		
	]);
} else {
 nodes = ([
 
 			 { [view] }
		
	]);
}
return h('div', { class: 'el-scrollbar' }, nodes);

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


 
 
 	this.$slots.default

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

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

可以看到，这里核心的内容就是计算thumb的长度heightPercentage/widthPercentage。这里使用wrap.clientHeight / wrap.scrollHeight得出了thumb长度的百分比。这是为什么呢

分析前面我们画的那张scrollbar的原理图，thumb在track中上下滚动，可滚动区域view在可视区域wrap中上下滚动，可以将thumb和track的这种相对关系看作是wrap和view相对关系的一个 微缩模型（微缩反应），而滚动条的意义就是用来反映view和wrap的这种相对运动关系的。从另一个角度，我们可以将view在wrap中的滚动反过来看成是wrap在view中的上下滚动，这不就是一个放大版的滚动条吗？

根据这种相似性，我们可以得出一个比例关系： wrap.clientHeight / wrap.scrollHeight = thumb.clientHeight / track.clientHeight。在这里，我们并不需要求出具体的thumb.clientHeight的值，只需要根据thumb.clientHeight / track.clientHeight的比值，来设置thumb 的css高度的百分比就可以了。

另外还有一个需要注意的地方，就是当这个比值大于等于100%的时候，也就是wrap.clientHeight（容器高度）大于等于 wrap.scrollHeight(滚动高度)的时候，此时就不需要滚动条了，因此将size置为空字符串。

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

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

关于“element中ScrollBar滚动组件怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

重庆分公司，新征程启航

element中ScrollBar滚动组件怎么用

其他资讯