Element分析（工具篇）——ScrollbarWidth

说明

用来获取滚动条宽度。

源码解析

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';  // 同样会加入overflow: scroll
  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%';  // 宽度为100%，实际上因为父级有滚动条，父级的 width 会变成 100px - 滚动条宽度
  outer.appendChild(inner);  // 插入

  const widthWithScroll = inner.offsetWidth;  // 内部宽度
  outer.parentNode.removeChild(outer);  // 移除

  return widthNoScroll - widthWithScroll;  // 滚动条宽度
};