获取浏览器原生滚动条宽度的方法

总体思路就是往body中插入一个div，div中再嵌套一个div，设置外部的div的overflower为scroll，

这样就能够出现滚动条轨道，而后使用外部div宽度值减去内部div的宽度值便可了 。

获得滚动条宽度以后记得把添加的元素删掉。

详细以下代码

const getScrollBarWidth = () => {
  const outer = document.createElement("div");
  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;
};