如何通过JS获取浏览器滚动条的宽度

如题：如何通过JS来获取浏览器滚动条的宽度？

首先我们来讲讲思路，在 body 标签中动态添加一个高为 200 像素，宽为100像素的 div ，设置 overflow 属性为 scroll，这时它的右边和底部出现滚动条，再往该 div 标签中动态插入一个宽度为 100% 的div元素，然后取两者的 offsetWidth 属性值，做差就得到滚动条的宽度。

以下是代码实现

const getScrollBarWidth = () => {
  const outer = document.createElement('div');
  outer.style.overflow = 'scroll';
  outer.style.height='200px';
  outer.style.width = '100px';
  document.body.appendChild(outer);
  const widthNoScroll = outer.offsetWidth;

  console.log('widthNoScroll', widthNoScroll)

  const inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);

  const widthWithScroll = inner.offsetWidth;

  console.log('widthWithScroll', widthWithScroll)

  scrollBarWidth = widthNoScroll - widthWithScroll;

  console.log(scrollBarWidth)

  return scrollBarWidth;
}
getScrollBarWidth();

在浏览器的console输出