[解決済み] JavaScriptでスクロールバーの幅を取得する [重複]。

質問

以下のHTMLは、div.containerの右内側の端にスクロールバーを表示するものです。

そのスクロールバーの幅を決定することは可能でしょうか？

<div class="container" style="overflow-y:auto; height:40px;">
  <div class="somethingBig"></div>
</div>

解決方法は？

この関数でスクロールバーの幅を指定することができます。

function getScrollbarWidth() {

  // Creating invisible container
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);

  // Creating inner element and placing it in the container
  const inner = document.createElement('div');
  outer.appendChild(inner);

  // Calculating difference between container's full width and the child width
  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer);

  return scrollbarWidth;

}

ここでの基本的な手順は

1. hidden div（外側）を作成し、そのオフセット幅を取得する。
2. CSSのoverflowプロパティを使ってdiv（outer）にスクロールバーを強制的に表示させる
3. 新しい div (inner) を作成して outer に追加し、その幅を '100%' に設定してオフセット幅を取得します。
4. 集めたオフセットからスクロールバーの幅を計算する

動作例はこちら。 http://jsfiddle.net/slavafomin/tsrmgcu9/

更新情報

Windows (metro)アプリで使用する場合は、必ず -MS-overflow-style プロパティに設定します。 scrollbar そうでない場合は、幅が正しく検出されません。(コード更新)

アップデートその2 Mac OS でデフォルトの "Only show scrollbars when scrolling" 設定がある場合（Yosemite 以降）、この設定は動作しません。