這篇文章將為大家詳細(xì)講解有關(guān)element中ScrollBar滾動(dòng)組件怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
scrollbar組件根目錄下包括index.js文件和src文件夾，index.js是用來注冊(cè)Vue插件的地方，沒什么好說的，不了解的童鞋可以看一下Vue官方文檔中的插件，src目錄下的內(nèi)容才是scrollbar組件的核心代碼，其入口文件是main.js。
在開始分析源碼之前，我們先來說一下自定義滾動(dòng)條的原理，方便大家更好的理解。
如圖，黑色wrap為滾動(dòng)的可顯示區(qū)域，我們的滾動(dòng)內(nèi)容就是在這個(gè)區(qū)域中滾動(dòng)，view是實(shí)際的滾動(dòng)內(nèi)容，超出wrap可顯示區(qū)域的內(nèi)容都將被隱藏。右側(cè)track是滾動(dòng)條的滾動(dòng)滑塊thumb上下滾動(dòng)的軌跡
當(dāng)wrap中的內(nèi)容溢出的時(shí)候，就會(huì)產(chǎn)生各瀏覽器的原生滾動(dòng)條，要實(shí)現(xiàn)自定義滾動(dòng)條，我們必須將原生滾動(dòng)條消滅掉。假設(shè)我們給wrap外面再包一層div，并且把這個(gè)div的樣式設(shè)為 overflow:hidden ，同時(shí)我們給wrap的marginRight,marginBottom設(shè)置一個(gè)負(fù)值，值得大小正好等于原生滾動(dòng)條的寬度，那么這個(gè)時(shí)候由于父容器的overflow:hidden屬性，正好就可以將原生滾動(dòng)條隱藏掉。然后我們?cè)賹⒆远x的滾動(dòng)條絕對(duì)定位到wrap容器的右側(cè)和下側(cè)，并加上滾動(dòng)、拖拽事件等滾動(dòng)邏輯，就可以實(shí)現(xiàn)自定義滾動(dòng)條了。
接下來我們從main.js入口開始，詳細(xì)分析一下element是如何實(shí)現(xiàn)這些邏輯的。
main.js文件中直接導(dǎo)出一個(gè)對(duì)象，這個(gè)對(duì)象采用render函數(shù)的方式渲染scrollbar組件，組件對(duì)外暴漏的接口如下：
重慶分公司
重慶分公司
props: {
native: Boolean, // 是否采用原生滾動(dòng)（即只是隱藏掉了原生滾動(dòng)條，但并沒有使用自定義的滾動(dòng)條）
wrapStyle: {}, // 內(nèi)聯(lián)方式 自定義wrap容器的樣式
wrapClass: {}, // 類名方式 自定義wrap容器的樣式
viewClass: {}, // 內(nèi)聯(lián)方式 自定義view容器的樣式
viewStyle: {}, // 類名方式 自定義view容器的樣式
noresize: Boolean, // 如果 container 尺寸不會(huì)發(fā)生變化，最好設(shè)置它可以優(yōu)化性能
tag: { // view容器用那種標(biāo)簽渲染，默認(rèn)為div
type: String,
default: 'div'
}
}可以看到，這就是整個(gè)ScrollBar組件對(duì)外暴露的接口，主要包括了自定義wrap,view樣式的接口，以及用來優(yōu)化性能的noresize接口。
然后我們?cè)賮矸治鲆幌聄ender函數(shù)：
render(){
let gutter = scrollbarWidth(); // 通過scrollbarWidth()方法 獲取瀏覽器原生滾動(dòng)條的寬度
let style = this.wrapStyle;
if (gutter) {
const gutterWith = `-${gutter}px`;
// 定義即將應(yīng)用到wrap容器上的marginBottom和marginRight,值為上面求出的瀏覽器滾動(dòng)條寬度的負(fù)值
const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
// 這一部分主要是根據(jù)接口wrapStyle傳入樣式的數(shù)據(jù)類型來處理style,最終得到的style可能是對(duì)象或者字符串
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;
}
}
...
}這一塊代碼中最重要的知識(shí)點(diǎn)就是獲取瀏覽器原生滾動(dòng)條寬度的方式了，為此element專門定義了一個(gè)方法scrllbarWidth,這個(gè)方法是從外部導(dǎo)入進(jìn)來的 import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; ，我們一起來看一下這個(gè)函數(shù)：
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;
};其實(shí)也很簡(jiǎn)單，就是動(dòng)態(tài)創(chuàng)建一個(gè)body的子元素outer，給固定寬度100px，并且將overflow設(shè)置為scroll，這樣wrap就產(chǎn)生滾動(dòng)條了，這個(gè)時(shí)候再動(dòng)態(tài)創(chuàng)建一個(gè)outer的子元素inner，將其寬度設(shè)置為100%。由于outer有滾動(dòng)條存在，inner的寬度必然不可能等于outer的寬度，此時(shí)用outer的寬度減去inner的寬度，得出的就是瀏覽器滾動(dòng)條的寬度了。是不是也很簡(jiǎn)單啊，最后記得從body中銷毀動(dòng)態(tài)創(chuàng)建outer元素哦。
回過頭來我們接著看render函數(shù)，在根據(jù)瀏覽器滾動(dòng)條寬度及wrapStyle動(dòng)態(tài)生成樣式變量style之后，接下來就是在render函數(shù)中生成ScrollBar組件的 HTML了。
// 生成view節(jié)點(diǎn)，并且將默認(rèn)slots內(nèi)容插入到view節(jié)點(diǎn)下
const view = h(this.tag, {
class: ['el-scrollbar__view', this.viewClass],
style: this.viewStyle,
ref: 'resize'
}, this.$slots.default);
// 生成wrap節(jié)點(diǎn)，并且給wrap綁定scroll事件
const wrap = (
);接著是根據(jù)native來組裝wrap,view生成整個(gè)HTML節(jié)點(diǎn)樹了。
let nodes;
if (!this.native) {
nodes = ([
wrap,
可以看到如果native為false，則使用自定義的滾動(dòng)條，如果為true，則不使用自定義滾動(dòng)條。簡(jiǎn)化上面的render函數(shù)生成的HTML如下：
