element中ScrollBar滾動組件怎么用

這篇文章將為大家詳細講解有關(guān)element中ScrollBar滾動組件怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

scrollbar組件根目錄下包括index.js文件和src文件夾，index.js是用來注冊Vue插件的地方，沒什么好說的，不了解的童鞋可以看一下Vue官方文檔中的插件，src目錄下的內(nèi)容才是scrollbar組件的核心代碼，其入口文件是main.js。

在開始分析源碼之前，我們先來說一下自定義滾動條的原理，方便大家更好的理解。

如圖，黑色wrap為滾動的可顯示區(qū)域，我們的滾動內(nèi)容就是在這個區(qū)域中滾動，view是實際的滾動內(nèi)容，超出wrap可顯示區(qū)域的內(nèi)容都將被隱藏。右側(cè)track是滾動條的滾動滑塊thumb上下滾動的軌跡

當(dāng)wrap中的內(nèi)容溢出的時候，就會產(chǎn)生各瀏覽器的原生滾動條，要實現(xiàn)自定義滾動條，我們必須將原生滾動條消滅掉。假設(shè)我們給wrap外面再包一層div，并且把這個div的樣式設(shè)為 overflow:hidden ，同時我們給wrap的marginRight,marginBottom設(shè)置一個負值，值得大小正好等于原生滾動條的寬度，那么這個時候由于父容器的overflow:hidden屬性，正好就可以將原生滾動條隱藏掉。然后我們再將自定義的滾動條絕對定位到wrap容器的右側(cè)和下側(cè)，并加上滾動、拖拽事件等滾動邏輯，就可以實現(xiàn)自定義滾動條了。

接下來我們從main.js入口開始，詳細分析一下element是如何實現(xiàn)這些邏輯的。

main.js文件中直接導(dǎo)出一個對象，這個對象采用render函數(shù)的方式渲染scrollbar組件，組件對外暴漏的接口如下：

props: {
 native: Boolean, // 是否采用原生滾動（即只是隱藏掉了原生滾動條，但并沒有使用自定義的滾動條）
 wrapStyle: {}, // 內(nèi)聯(lián)方式 自定義wrap容器的樣式
 wrapClass: {}, // 類名方式 自定義wrap容器的樣式
 viewClass: {}, // 內(nèi)聯(lián)方式 自定義view容器的樣式
 viewStyle: {}, // 類名方式 自定義view容器的樣式
 noresize: Boolean, // 如果 container 尺寸不會發(fā)生變化，最好設(shè)置它可以優(yōu)化性能
 tag: { 				// view容器用那種標(biāo)簽渲染，默認(rèn)為div
 type: String,
 default: 'div'
 }
}

可以看到，這就是整個ScrollBar組件對外暴露的接口，主要包括了自定義wrap,view樣式的接口，以及用來優(yōu)化性能的noresize接口。

然后我們再來分析一下render函數(shù)：

render(){
	let gutter = scrollbarWidth(); // 通過scrollbarWidth()方法 獲取瀏覽器原生滾動條的寬度
 let style = this.wrapStyle;

 if (gutter) {
 const gutterWith = `-${gutter}px`;
 
 // 定義即將應(yīng)用到wrap容器上的marginBottom和marginRight,值為上面求出的瀏覽器滾動條寬度的負值
 const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;

 // 這一部分主要是根據(jù)接口wrapStyle傳入樣式的數(shù)據(jù)類型來處理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,這個方法是從外部導(dǎo)入進來的 import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; ，我們一起來看一下這個函數(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;
};

其實也很簡單，就是動態(tài)創(chuàng)建一個body的子元素outer，給固定寬度100px，并且將overflow設(shè)置為scroll，這樣wrap就產(chǎn)生滾動條了，這個時候再動態(tài)創(chuàng)建一個outer的子元素inner，將其寬度設(shè)置為100%。由于outer有滾動條存在，inner的寬度必然不可能等于outer的寬度，此時用outer的寬度減去inner的寬度，得出的就是瀏覽器滾動條的寬度了。是不是也很簡單啊，最后記得從body中銷毀動態(tài)創(chuàng)建outer元素哦。

回過頭來我們接著看render函數(shù)，在根據(jù)瀏覽器滾動條寬度及wrapStyle動態(tài)生成樣式變量style之后，接下來就是在render函數(shù)中生成ScrollBar組件的 HTML了。

// 生成view節(jié)點，并且將默認(rèn)slots內(nèi)容插入到view節(jié)點下
const view = h(this.tag, {
 class: ['el-scrollbar__view', this.viewClass],
 style: this.viewStyle,
 ref: 'resize'
}, this.$slots.default);

// 生成wrap節(jié)點，并且給wrap綁定scroll事件
const wrap = (
 <div
 	ref="wrap"
 	style={ style }
		onScroll={ this.handleScroll }
		class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>
 		{ [view] }
	</div>
);

接著是根據(jù)native來組裝wrap,view生成整個HTML節(jié)點樹了。

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函數(shù)生成的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設(shè)置了overflow:hidden,用來隱藏wrap中產(chǎn)生的瀏覽器原生滾動條。使用ScrollBar組建時，寫在ScrollBar組件中的內(nèi)容都將通過slot分發(fā)到view內(nèi)部。另外這里使用move，size和vertical三個接口調(diào)用了Bar組件，這個組件就是原理圖上的Track和Thumb了。下面我們來看一下Bar組件：

props: {
 vertical: Boolean, // 當(dāng)前Bar組件是否為垂直滾動條
 size: String, // 百分?jǐn)?shù)，當(dāng)前Bar組件的thumb長度 / track長度的百分比 
 move: Number // 滾動條向下/向右發(fā)生transform: translate的值
},

Bar組件的行為都是由這三個接口來進行控制的，在前面的分析中，我們可以看到，在scrollbar中調(diào)用Bar組件時，分別傳入了這三個props。那么父組件是如何初始化以及更新這三個參數(shù)的值，從而達到更新Bar組件的呢。首先在mounted鉤子中調(diào)用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) ? (heightPercentage + '%') : '';
 this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
}

可以看到，這里核心的內(nèi)容就是計算thumb的長度heightPercentage/widthPercentage。這里使用wrap.clientHeight / wrap.scrollHeight得出了thumb長度的百分比。這是為什么呢

分析前面我們畫的那張scrollbar的原理圖，thumb在track中上下滾動，可滾動區(qū)域view在可視區(qū)域wrap中上下滾動，可以將thumb和track的這種相對關(guān)系看作是wrap和view相對關(guān)系的一個 微縮模型 （微縮反應(yīng)），而滾動條的意義就是用來反映view和wrap的這種相對運動關(guān)系的。從另一個角度，我們可以將view在wrap中的滾動反過來看成是wrap在view中的上下滾動，這不就是一個放大版的滾動條嗎？

根據(jù)這種相似性，我們可以得出一個比例關(guān)系： wrap.clientHeight / wrap.scrollHeight = thumb.clientHeight / track.clientHeight。在這里，我們并不需要求出具體的thumb.clientHeight的值，只需要根據(jù)thumb.clientHeight / track.clientHeight的比值，來設(shè)置thumb 的css高度的百分比就可以了。

另外還有一個需要注意的地方，就是當(dāng)這個比值大于等于100%的時候，也就是wrap.clientHeight（容器高度）大于等于 wrap.scrollHeight(滾動高度)的時候，此時就不需要滾動條了，因此將size置為空字符串。

接下來我們再來看一下move，也就是滾動條滾動位置的更新。

handleScroll() {
 const wrap = this.wrap;

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

moveX/moveY用來控制滾動條的滾動位置，當(dāng)這個值傳給Bar組件時，Bar組件render函數(shù)中會調(diào)用 renderThumbStyle 方法將它轉(zhuǎn)化為trumb的樣式 transform: translateX(${moveX}%) / transform: translateY(${moveY}%) 。由之前分析的相似關(guān)系可知，當(dāng)wrap.scrollTop正好等于wrap.clientHeight的時候，此時thumb應(yīng)該向下滾動它自身長度的距離，也就是transform: translateY(100%)。所以，當(dāng)wrap滾動的時候，thumb應(yīng)該向下滾動的距離正好是 transform: translateY(wrap.scrollTop / wrap.clientHeight )。這就是wrap滾動函數(shù)handleScroll中的邏輯所在。

現(xiàn)在我們已經(jīng)完全弄清楚了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函數(shù)獲取父組件傳遞的size，move之后，通過 renderThumbStyle 來生成thumb,并且給track和thumb分別綁定了onMousedown事件。

clickThumbHandler(e) {
 this.startDrag(e);
 // 記錄this.y , this.y = 鼠標(biāo)按下點到thumb底部的距離
 // 記錄this.x , this.x = 鼠標(biāo)按下點到thumb左側(cè)的距離
 this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
},
 
// 開始拖拽函數(shù)
startDrag(e) {
 e.stopImmediatePropagation();
 // 標(biāo)識位， 標(biāo)識當(dāng)前開始拖拽
 this.cursorDown = true;

 // 綁定mousemove和mouseup事件
 on(document, 'mousemove', this.mouseMoveDocumentHandler);
 on(document, 'mouseup', this.mouseUpDocumentHandler);
 
 // 解決拖動過程中頁面內(nèi)容選中的bug
 document.onselectstart = () => false;
},
 
mouseMoveDocumentHandler(e) {
 // 判斷是否在拖拽過程中，
 if (this.cursorDown === false) return;
 // 剛剛記錄的this.y(this.x) 的值
 const prevPage = this[this.bar.axis];

 if (!prevPage) return;

 // 鼠標(biāo)按下的位置在track中的偏移量，即鼠標(biāo)按下點到track頂部(左側(cè))的距離
 const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
 // 鼠標(biāo)按下點到thumb頂部(左側(cè))的距離
 const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
 // 當(dāng)前thumb頂部（左側(cè)）到track頂部（左側(cè)）的距離，即thumb向下（向右）偏移的距離 占track高度（寬度）的百分比
 const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
	// wrap.scrollHeight / wrap.scrollLeft * thumbPositionPercentage得到wrap.scrollTop / wrap.scrollLeft
 // 當(dāng)wrap.scrollTop(wrap.scrollLeft)發(fā)生變化的時候，會觸發(fā)父組件wrap上綁定的onScroll事件，
 // 從而重新計算moveX/moveY的值，這樣thumb的滾動位置就會重新渲染
 this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
},

mouseUpDocumentHandler(e) {
 // 當(dāng)拖動結(jié)束，將標(biāo)識位設(shè)為false
 this.cursorDown = false;
 // 將上一次拖動記錄的this.y(this.x)的值清空
 this[this.bar.axis] = 0;
 // 取消頁面綁定的mousemove事件
 off(document, 'mousemove', this.mouseMoveDocumentHandler);
 // 清空onselectstart事件綁定的函數(shù)
 document.onselectstart = null;
}

上面的代碼就是thumb滾動條拖拽的所有處理邏輯，整體思路就是在拖拽thumb的過程中，動態(tài)的計算thumb頂部（左側(cè)）到track頂部（左側(cè)）的距離占track本身高度（寬度）的百分比，然后利用這個百分比動態(tài)改變wrap.scrollTop的值，從而觸發(fā)頁面滾動以及滾動條位置的重新計算，實現(xiàn)滾動效果。

上一個圖方便大家理解吧(￣▽￣)"

• track的onMousedown和trumb的邏輯也差不多，有兩點需要注意：

• track的onMousedown事件回調(diào)中不會給頁面綁定mousemove和mouseup事件，因為track相當(dāng)于click事件 在track的onmousedown事件中，我們計算thumb頂部到track頂部的方法是，用鼠標(biāo)點擊點到track頂部的距離減去thumb的二分之一高度，這是因為點擊track之后，thumb的中點剛好要在鼠標(biāo)點擊點的位置。

關(guān)于“element中ScrollBar滾動組件怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。