說明
用來獲取滾動條寬度冗澈。
源碼解析
import Vue from 'vue';
let scrollBarWidth;
export default function() {
if (Vue.prototype.$isServer) return 0; // 服務(wù)器端直接返回
if (scrollBarWidth !== undefined) return scrollBarWidth; // 如果已經(jīng)計算過就直接返回之前的
const outer = document.createElement('div'); // 創(chuàng)建外部的容器
outer.className = 'el-scrollbar__wrap'; // 同樣會加入overflow: scroll
outer.style.visibility = 'hidden'; // 不可見
outer.style.width = '100px'; // 設(shè)置一個寬度
outer.style.position = 'absolute'; // 絕對定位
outer.style.top = '-9999px'; // 移除可視區(qū)域
document.body.appendChild(outer); // 插入
const widthNoScroll = outer.offsetWidth; // 可是寬度
outer.style.overflow = 'scroll'; // 會顯示出滾動條
const inner = document.createElement('div'); // 創(chuàng)建內(nèi)部
inner.style.width = '100%'; // 寬度為100%陋葡，實際上因為父級有滾動條亚亲，父級的 width 會變成 100px - 滾動條寬度
outer.appendChild(inner); // 插入
const widthWithScroll = inner.offsetWidth; // 內(nèi)部寬度
outer.parentNode.removeChild(outer); // 移除
return widthNoScroll - widthWithScroll; // 滾動條寬度
};
