スクロールバーの幅を取得

スクロールバーの幅を取得したいと思ってググったが、ピンとくるものがなくて
試しに書いてみた。
画面上にスクロールバーがある場合とない場合で取得できる値が違かったり、
marginとborderの値を考慮しなければいけなかったり、案外面倒。
もっといい手はないものか。。。。

function getScrollBarWidth() {

  if (!getScrollBarWidth.entity) {
    
    // 画面上に実際スクロールバーがあるときとないときとで違う。
    // あるときは30, ないときは16。=> bodyのmarginが0ならたぶん行ける。
    // http://daiiz.hatenablog.com/entry/2014/08/15/215916
    // getScrollBarWidth.entity = window.innerWidth - document.body.clientWidth;

    // 画面上に実際にスクロールバーが表示されてないと0px。あると13.6px。
    // => position: relativeだと29.6, absoluteだと13.6...どっちだよ！なおfixedだと0になる。
    // => たぶん、vwはbodyのwidthを取っているのでmargin分が増えている。
    // 強制的に縦長にしてやると値がとれる。一瞬なので描画もされない。
    // なお、calcの中の計算はスペースを入れないとバグるっぽい。知らなかったそんなの...
    // https://hail2u.net/blog/webdesign/scrollbar-width.html
    // なぜか↑このページと計算結果が違うっぽい。。。
    // でも自分の書いたほうは合っているっぽいし良いや。
    
    // これが完成形？
    var dummy = '<div style="position:absolute;height:9999px;width:calc(100vw - 100%);opacity:0;">x</div>';
    document.body.insertAdjacentHTML('beforeend', dummy);
    var element = document.body.querySelector('div:last-child');
    getScrollBarWidth.entity = document.defaultView.getComputedStyle(element, '').width;
    document.body.removeChild(element);
  }
  return getScrollBarWidth.entity;
}