148

次の HTML は、div.container の内側の右端にスクロール バーを表示します。

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

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

9 に答える 9

286

この関数は、スクロールバーの幅を提供する必要があります

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. 非表示の div (外側) を作成し、オフセット幅を取得します
  2. CSS オーバーフロー プロパティを使用してスクロール バーを div (外側) に強制的に表示する
  3. 新しい div (内側) を作成して外側に追加し、その幅を「100%」に設定してオフセット幅を取得します
  4. 収集したオフセットに基づいてスクロールバーの幅を計算する

ここでの実例: http://jsfiddle.net/slavafomin/tsrmgcu9/

アップデート

これを Windows (メトロ) アプリで使用している場合は、'outer' div の-ms-overflow-stylescrollbarプロパティを に設定していることを確認してください。そうしないと、幅が正しく検出されません。(コードを更新)

更新 #2 これは、デフォルトの「スクロール時にスクロールバーのみを表示する」設定 (Yosemite 以降) の Mac OS では機能しません。

于 2012-11-14T16:25:54.227 に答える
50

// offsetWidthにはスクロール バーの幅が含まれますが、clientWidthには含まれません。原則として、14-18px に相当します。それで：

 var scrollBarWidth = element.offsetWidth - element.clientWidth;
于 2016-11-12T23:11:51.077 に答える
15

子がスクロールバーを除くコンテナの幅全体を使用する場合 (デフォルト)、幅を差し引くことができます。

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;
于 2012-11-14T16:09:05.283 に答える
4

jQuery を使用した簡単な方法を次に示します。

var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();

基本的に、全体の幅からスクロール可能な幅を差し引いて、スクロールバーの幅を提供する必要があります。もちろん、jQuery('div.withScrollBar') の選択をキャッシュして、その部分を 2 回実行しないようにする必要があります。

于 2014-11-25T08:06:27.883 に答える
0

これは私のために働いた..

 function getScrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}
于 2015-08-26T17:17:35.663 に答える