ブラウザのスクロールバーのサイズを取得するにはどうすればよいですか?


164

JavaScriptで水平スクロールバーの高さ、または垂直スクロールバーの幅を決定するにはどうすればよいですか?


2
以下は、JQuery Dimensionプラグインの作成者からのスニペットです。github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/…このソリューションを提供するのは遅すぎるかもしれませんが、私にとってはIMOのほうが良いようです。
Yanick Rochon、2010

このソリューションをご覧ください
GibboK

@GibboK-そのソリューションは失敗します-offsetWidth == clientWidthなので、常にゼロです。これは、IEとChromeのエッジでテストされています。
beauXjames 2015

1
@beauXjames奇妙なことに、FFで私にとっては
うまくいく

この質問は、スクロールバーが間違った場所(画面の中央)にある状況で発生します。この状況では、おそらくスクロールバーを表示したくないでしょう。ほとんどの場合、iScroll
JoostS '19

回答:


139

Alexandre Gomesブログから、 私はそれを試していません。それがあなたのために働くかどうか私に知らせてください。

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

2
アイデアは天才です。私は間違いなくこれに基づいてMooToolsクラスを作成しています。
ライアンフローレンス

ええ、私は同じグーグルの結果を得ました。:)私はあなたに情報を提供しようと努力しています。
glmxndr 2009年

あなたのテーマを異なるサイズのスクロールバーのあるテーマに変更した場合、実際の計算された逸脱は何ですか?
Matthew Vines、

1
相互参照のためにここを参照してください:stackoverflow.com/questions/3417139/...
Yanickロション

6
異なるページズームで異なる値を返します。Win7、Opera、FF。
Kolyunya 2013年

79

jQueryを使用すると、Matthew Vinesの回答を次のように短縮できます。

function getScrollBarWidth () {
    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
        widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    return 100 - widthWithScroll;
};

2
ありがとう、この解決策はとてもきれいです!!
jherax 14

4
このソリューションは、JQueryのソースコード全体がその前にコピーアンドペーストされた場合、本当にきれいに感じるでしょうか?これは、このソリューションが行っていることのほとんどです。この質問はJQueryで回答を求めていませんでした。ライブラリを使用せずにこのタスクを実行することは完全に可能で効率的です。
DaemonOfTheWest 2017

5
すでにJQueryを使用している場合、Daemonのコメントは関係ありません。はい、これを行うためだけにJQueryを追加するのはナンセンスですが、既にプロジェクトでJQueryを使用している人にとっては、これは受け入れられているものよりもはるかに「単純な」ソリューションです。
タイラーダーレ2017

25

これは私が見つけた唯一のスクリプトで、webkitブラウザで動作しています... :)

$.scrollbarWidth = function() {
  var parent, child, width;

  if(width===undefined) {
    parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
    child=parent.children();
    width=child.innerWidth()-child.height(99).innerWidth();
    parent.remove();
  }

 return width;
};

最小化バージョン:

$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};

そして、ドキュメントの準備ができたら、それを呼び出す必要があります...

$(function(){ console.log($.scrollbarWidth()); });

最新のFF、Chrome、IE、SafariでWindows 7で2012-03-28をテストし、100%動作。

ソース:http : //benalman.com/projects/jquery-misc-plugins/#scrollbarwidth


13
幅は常にそのコードでは未定義です。if(true){...}
sstur

3
修正:関数が初めて呼び出されたときwidth常に ===未定義になります。その後の関数の呼び出しはすでに設定されているので、そのチェックは計算が不必要に再実行されるのを防ぐだけです。width
MartinAnsty 2013

17
@MartinAnstyしかし、[width]変数は関数で宣言さているため、関数を呼び出すたびに再作成されます。
MadSkunk 2013

4
@MartinAnsty、ソースを見ると、外部クロージャーで宣言されています。
TheCloudlessSky 2013年

3
ただ、@ssturと@TheCloudlessSkyによって作られたポイントを強化するために、上記のコードではありませんベンAlmanのプラグインでのものと同じ、それがで結果をキャッシュしませんwidthが、むしろそれを一つ一つ時間を再計算します。動作しますが、ひどく非効率的です。世界を支持し、代わりにアルマンのプラグインで正しいバージョンを使用してください。
hashchange 2014年

24

単純な操作を探している場合は、単純なdom jsとjqueryを混ぜてください。

var swidth=(window.innerWidth-$(window).width());

現在のページのスクロールバーのサイズを返します。(表示されている場合、または0を返す場合)


10
ウィンドウにスクロールバー(大きなモニター、または小さなページ/アプリ)がなかった場合、これは失敗します
Farid Nouri Neshat

1
これは私が欲しかったものです
azerafati '26 / 04/15

16
window.scrollBarWidth = function() {
  document.body.style.overflow = 'hidden'; 
  var width = document.body.clientWidth;
  document.body.style.overflow = 'scroll'; 
  width -= document.body.clientWidth; 
  if(!width) width = document.body.offsetWidth - document.body.clientWidth;
  document.body.style.overflow = ''; 
  return width; 
} 

最初に受け入れられた回答を試しましたが、Windows 8上のFirefoxでは機能しないことがわかりました。
Matijs 2013年

1
短いコードですが、ブラウザはページ全体を再描画する必要があるため、非常に遅くなります。
Adrian Maire、2014年

11

私にとって、最も便利な方法は

(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)

バニラJavaScript。

ここに画像の説明を入力してください


@ stephen-kendyに感謝します。挨拶。
アンドレスモレノ

3
ちょうど私が必要としたもの。1つの提案:2番目の用語はで置き換えることができますdocument.documentElement.clientWidth。要素documentElementを取得する意図をより明確かつ明確に表現し<html>ます。
Jan Miksovsky

9

ページ自体ではなく、ページ内の要素に対して機能する簡単な解決策を見つけました。 $('#element')[0].offsetHeight - $('#element')[0].clientHeight

これは、x軸のスクロールバーの高さを返します。


偉大な者!!あなたは私の日を作った:)それはy軸スクロールバーの ".offsetWidth"と ".clientWidth"でも同様に機能しています。
ポロッソン2014

1
残念ながら、少なくとも幅に関しては、完全に信頼できるとは思えません。LinuxのFireFoxとChromeの両方で、.clientWidthにスクロールバーの幅の半分が含まれているようです。
Michael Scheper 2014年

6

以下からのデビッド・ウォルシュさんのブログ

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);
.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

私のウェブサイトでは17、ここではStackoverflowで14をくれます。


4

スクロールバーが付いた要素がすでにある場合は、次を使用します。

function getScrollbarHeight(el) {
    return el.getBoundingClientRect().height - el.scrollHeight;
};

horzintscrollbarが存在しない場合、関数は0を返します。


これが最良の答えです。KISSがすべてを支配
MarcD、2018年

4

jquery + javascriptを使用windowしてdocument、以下のようにスクロールバーを決定できます。

var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );

innerWidthはIE9 +用であることに注意してください。そうでなければ素晴らしいソリューション。
PALThingbø

3

そのAntiscroll.jsコードでそれを行う方法は次のとおりです。

function scrollbarSize () {
  var div = $(
      '<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;'
    + 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"/>'
    + '</div>'
  );

  $('body').append(div);
  var w1 = $(div).innerWidth();
  var w2 = $('div', div).innerWidth();
  $(div).remove();

  return w1 - w2;
};

コードはここからです:https : //github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447


3
detectScrollbarWidthHeight: function() {
    var div = document.createElement("div");
    div.style.overflow = "scroll";
    div.style.visibility = "hidden";
    div.style.position = 'absolute';
    div.style.width = '100px';
    div.style.height = '100px';
    document.body.appendChild(div);

    return {
        width: div.offsetWidth - div.clientWidth,
        height: div.offsetHeight - div.clientHeight
    };
},

Chrome、FF、IE8、IE11でテスト済み。


2

これでうまくいくはずです、いいえ?

function getScrollbarWidth() {
  return (window.innerWidth - document.documentElement.clientWidth);
}

2

divを作成し、それがすべてのページに存在することを確認します(つまり、headerテンプレートに配置する)。

これにこのスタイルを与えます:

#scrollbar-helper {
    // Hide it beyond the borders of the browser
    position: absolute;
    top: -100%;

    // Make sure the scrollbar is always visible
    overflow: scroll;
}

次に#scrollbar-helper、JavaScript でのサイズを確認します。

var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;

このように計算何もする必要は、div常に持っていないだろうwidthheightscrollbar

唯一の欠点はdiv、テンプレートが空になることです。しかし、その一方で、JavaScriptファイルはコードが1行または2行しかかからないため、よりクリーンになります。


1
function getWindowScrollBarHeight() {
    let bodyStyle = window.getComputedStyle(document.body);
    let fullHeight = document.body.scrollHeight;
    let contentsHeight = document.body.getBoundingClientRect().height;
    let marginTop = parseInt(bodyStyle.getPropertyValue('margin-top'), 10);
    let marginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
    return fullHeight - contentHeight - marginTop - marginBottom;
  }

1
function getScrollBarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
}

ほとんどのブラウザは、スクロールバーの幅に15pxを使用します


0

jqueryを使用(Firefoxでのみテスト):

function getScrollBarHeight() {
    var jTest = $('<div style="display:none;width:50px;overflow: scroll"><div style="width:100px;"><br /><br /></div></div>');
    $('body').append(jTest);
    var h = jTest.innerHeight();
    jTest.css({
        overflow: 'auto',
        width: '200px'
    });
    var h2 = jTest.innerHeight();
    return h - h2;
}

function getScrollBarWidth() {
    var jTest = $('<div style="display:none;height:50px;overflow: scroll"><div style="height:100px;"></div></div>');
    $('body').append(jTest);
    var w = jTest.innerWidth();
    jTest.css({
        overflow: 'auto',
        height: '200px'
    });
    var w2 = jTest.innerWidth();
    return w - w2;
}

しかし、私は実際には@Steveの答えの方が好きです。


0

これは素晴らしい答えです:https : //stackoverflow.com/a/986977/5914609

しかし、私の場合はうまくいきませんでした。そして、私は何時間もかけてソリューションを探しました。
最後に、上のコードに戻って、各スタイルに!importantを追加しました。そしてそれはうまくいった。
元の回答の下にコメントを追加できません。だからここに修正があります:

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100% !important";
  inner.style.height = "200px !important";

  var outer = document.createElement('div');
  outer.style.position = "absolute !important";
  outer.style.top = "0px !important";
  outer.style.left = "0px !important";
  outer.style.visibility = "hidden !important";
  outer.style.width = "200px !important";
  outer.style.height = "150px !important";
  outer.style.overflow = "hidden !important";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll !important';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

0

このライフハックの決定により、ブラウザーのscrollY幅(バニラJavaScript)を見つける機会が与えられます。この例を使用すると、現在の設計概念に従ってスクロールする必要のない要素を含む、任意の要素の scrollY幅取得できます。

getComputedScrollYWidth     (el)  {

  let displayCSSValue  ; // CSS value
  let overflowYCSSValue; // CSS value

  // SAVE current original STYLES values
  {
    displayCSSValue   = el.style.display;
    overflowYCSSValue = el.style.overflowY;
  }

  // SET TEMPORALLY styles values
  {
    el.style.display   = 'block';
    el.style.overflowY = 'scroll';
  }

  // SAVE SCROLL WIDTH of the current browser.
  const scrollWidth = el.offsetWidth - el.clientWidth;

  // REPLACE temporally STYLES values by original
  {
    el.style.display   = displayCSSValue;
    el.style.overflowY = overflowYCSSValue;
  }

  return scrollWidth;
}

0

オフセット幅の違いに基づく、より簡潔で読みやすいソリューションを次に示します。

function getScrollbarWidth(): number {

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

}

JSFiddleを参照してください


0

すでに私のライブラリでコーディングされているので、ここにあります:

var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;

$(window).width()代わりにjQuery を使用することもできwindow.document.documentElement.clientWidthます。

右側のFirefoxで開発者ツールを開いた場合は機能しませんが、下部のdevsウィンドウを開いた場合は機能しません。

window.screenサポートされているquirksmode.org

楽しんで!


0

それは動作するようですが、おそらくすべてのブラウザで動作するより簡単な解決策がありますか?

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);
.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.