JavaScriptでスクロールバーの幅を取得する

スクロールバーありきのレイアウトを組みたいときにスクロールバーの幅を取得したい。

こういうふうにしてみるとどうだろうか。

// スクロールバーのサイズ取得
let scrollbarWidth = getScrollbarWidth();

function getScrollbarWidth() {
  let element = document.createElement("div");
  element.style.visibility = "hidden";
  element.style.overflow = "scroll";
  document.body.appendChild(element);
  const scrollbarWidth = element.offsetWidth - element.clientWidth;
  document.body.removeChild(element);

  return scrollbarWidth;
}

一度ダミーの要素をドキュメントに差し込んでスクロールバー分の幅を取るようにする。