如何通过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输出