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