JavaScript を使用してスクロールバーの幅を取得する [重複] 質問する

Question

この関数はスクロールバーの幅を返します

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;
    
}

基本的な手順は次のとおりです。

隠しdiv（外側）を作成し、そのオフセット幅を取得します。
CSS オーバーフロープロパティを使用して、スクロールバーを div (外側) に強制的に表示します。
新しいdiv（内側）を作成し、外側に追加し、幅を「100％」に設定してオフセット幅を取得します。
収集されたオフセットに基づいてスクロールバーの幅を計算する

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

アップデート

Windows（メトロ）アプリでこれを使用する場合は、-msオーバーフロースタイル'outer' div のプロパティをに設定しscrollbarないと、幅が正しく検出されません。(コード更新)

アップデート#2これにより、Mac OS では、デフォルトの「スクロール時にのみスクロールバーを表示する」設定 (Yosemite 以降) で 0 の値が返されますが、これは期待どおりの場合とそうでない場合があります。

Answer 1