說明:以下基于elementUI@2.13.1。
在element-ui\src\utils\scrollbar-width.js
中:
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;
};
第一步取董,創(chuàng)建一個100px寬度的div元素插入body中饼灿,并設(shè)置滾動模式,widthNoScroll保存該div的offseWidth,即100嗅定;
第二步,創(chuàng)建一個100%寬度的div元素用踩,插入到第一步創(chuàng)建的div中渠退,widthWithScroll保存offseWidth值,在本人電腦中為83脐彩;
第三步碎乃,返回值為widthNoScroll - widthWithScroll,即17惠奸。