177

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

4

25 に答える 25

82

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;
};
于 2013-09-25T21:10:19.870 に答える
26

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

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

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

于 2014-04-01T06:33:23.367 に答える
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()); });

2012 年 3 月 28 日に Windows 7 で最新の FF、Chrome、IE、Safari をテストし、100% 動作しました。

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

于 2012-03-28T13:46:29.107 に答える
17 
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; 
}
于 2009-06-12T19:59:57.730 に答える
9

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

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

于 2014-07-23T15:24:56.660 に答える
8

David Walsh のブログから:

// 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 です。

于 2016-06-13T02:00:53.870 に答える
5

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

var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );
于 2016-06-10T09:12:48.497 に答える
4

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

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

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

于 2015-10-05T11:33:02.127 に答える
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

于 2014-03-28T08:08:11.127 に答える
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 でテスト済み。

于 2014-04-10T16:40:01.253 に答える
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の答えの方が好きです。

于 2014-09-23T11:14:14.607 に答える
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;
}

于 2020-06-02T19:43:27.097 に答える