blocks|key|1531791|text|我还没有在Alexandre+Gomes+Blog上尝试过。如果对你有效，请让我知道。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1531792|function+getScrollBarWidth+()+{
++var+inner+=+document.createElement('p');
++inner.style.width+=+"100%25";
++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);
};|code-block|syntax|javascript|1531793|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alexandre-gomes.com/?p=115^0|5|K|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>From <a href="http://www.alexandre-gomes.com/?p=115" rel="noreferrer">Alexandre Gomes Blog</a>  I have not tried it.  Let me know if it works for you.</p>

<pre><code>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);
};
</code></pre>


blocks|key|1316609|text|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;+
}+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1316610|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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; 
} 
</code></pre>


blocks|key|1316662|text|这是我找到的唯一脚本，它在webkit浏览器中工作...+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1316663|$.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;
};|code-block|syntax|javascript|1316664|最小化版本：|1316665|$.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};|1316666|当文档准备好的时候你必须调用它...所以|1316667|$(function(){+console.log($.scrollbarWidth());+});|1316668|在Windows+7上使用最新的FF、Chrome、IE和Safari测试了2012-03-28，并且100%25正常工作。|1316669|来源：http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth|offset|length|1316670|entityMap|0|LINK|mutability|MUTABLE|url|http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth^0|0|0|0|0|0|0|0|3|1S|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>This is only script I've found, which is working in webkit browsers ... :)</p>

<pre><code>$.scrollbarWidth = function() {
  var parent, child, width;

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

 return width;
};
</code></pre>

<p>Minimized version:</p>

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

<p>And you have to call it when document is ready ... so</p>

<pre><code>$(function(){ console.log($.scrollbarWidth()); });
</code></pre>

<p>Tested 2012-03-28 on Windows 7 in latest FF, Chrome, IE &amp; Safari and 100% working.</p>

<p>source: <a href="http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth" rel="noreferrer">http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth</a></p>


blocks|key|1316691|text|使用jQuery，您可以将Matthew+Vines的答案缩短为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1316692|function+getScrollBarWidth+()+{
++++var+$outer+=+$('<div>').css({visibility:+'hidden',+width:+100,+overflow:+'scroll'}).appendTo('body'),
++++++++widthWithScroll+=+$('<div>').css({width:+'100%25'}).appendTo($outer).outerWidth();
++++$outer.remove();
++++return+100+-+widthWithScroll;
};|code-block|syntax|javascript|1316693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Using jQuery, you can shorten Matthew Vines answer to:</p>

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


blocks|key|1316728|text|Antiscroll.js在其代码中这样做的方式是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1316729|function+scrollbarSize+()+{
++var+div+=+$(
++++++'<div+class="antiscroll-inner"+style="width:50px;height:50px;overflow-y:scroll;'
++++%2B+'position:absolute;top:-200px;left:-200px;"><div+style="height:100px;width:100%25"/>'
++++%2B+'</div>'
++);

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

++return+w1+-+w2;
};|code-block|syntax|javascript|1316730|代码来自这里：https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447|1316731|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447^0|0|D|0|0|7|1Z|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>The way <code>Antiscroll.js</code> does it in it's code is:</p>

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

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

  return w1 - w2;
};
</code></pre>

<p>The code is from here: <a href="https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447" rel="nofollow">https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447</a></p>


blocks|key|1531966|text|如果您正在寻找一种简单操作，只需混合使用普通dom+js和jquery，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1531967|var+swidth=(window.innerWidth-$(window).width());|code-block|syntax|javascript|1531968|返回当前页面滚动条的大小。(如果它可见，否则将返回0)|1531969|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>if you are looking for a simple operation, just mix plain dom js and jquery,</p>

<pre><code>var swidth=(window.innerWidth-$(window).width());
</code></pre>

<p>returns the size of current page scrollbar. (if it is visible or else will return 0)</p>


blocks|key|1316825|text|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
++++};
},|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1316826|已在Chrome、FF、IE8、IE11中测试。|unstyled|1316827|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>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
    };
},
</code></pre>

<p>Tested in Chrome, FF, IE8, IE11.</p>


blocks|key|1532050|text|我发现了一个简单的解决方案，它适用于页面内部的元素，而不是页面本身：$('#element')[0].offsetHeight+-+$('#element')[0].clientHeight|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1532051|这将返回x轴滚动条的高度。|1532052|entityMap^0|Y|1P|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p>I found a simple solution that works for elements inside of the page, instead of the page itself:
<code>$('#element')[0].offsetHeight - $('#element')[0].clientHeight</code></p>

<p>This returns the height of the x-axis scrollbar.</p>


blocks|key|1316939|text|使用jquery+(仅在firefox中测试)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1316940|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;
}|code-block|syntax|javascript|1316941|但实际上我更喜欢@Steve的答案。|1316942|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>With jquery (only tested in firefox): </p>

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

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

<p>But I actually like @Steve's answer better.</p>


blocks|key|1532162|text|如果您已经有一个带有滚动条的元素，请使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532163|function+getScrollbarHeight(el)+{
++++return+el.getBoundingClientRect().height+-+el.scrollHeight;
};|code-block|syntax|javascript|1532164|如果不存在horzintscrollbar，则函数将返回0|1532165|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you already have an element with scrollbars on it use:</p>

<pre><code>function getScrollbarHeight(el) {
    return el.getBoundingClientRect().height - el.scrollHeight;
};
</code></pre>

<p>If there is no horzintscrollbar present the function will retun 0</p>


blocks|key|1317071|text|这是一个很好的答案：https://stackoverflow.com/a/986977/5914609|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1317072|然而，在我的情况下，它不起作用。我花了几个小时寻找解决方案。|1317073|最后，我返回到上面的代码，并添加了！对每种风格的重要性。而且它起作用了。|1317074|我不能在原始答案下面添加评论。因此，修复方法如下：|1317075|function+getScrollBarWidth+()+{
++var+inner+=+document.createElement('p');
++inner.style.width+=+"100%25+!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);
};|code-block|syntax|javascript|1317076|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/986977/5914609^0|A|16|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>This is a great answer:
<a href="https://stackoverflow.com/a/986977/5914609">https://stackoverflow.com/a/986977/5914609</a></p>

<p>However in my case it did not work. And i spent hours searching for the solution.<br/>
Finally i've returned to above code and added !important to each style. And it worked.<br>
I can not add comments below the original answer. So here is the fix:</p>

<pre><code>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);
};
</code></pre>


blocks|key|1532295|text|您可以使用document确定window滚动条，如下所示使用jquery+%2B+javascript：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1532296|var+scrollbarWidth+=+($(document).width()+-+window.innerWidth);
console.info("Window+Scroll+Bar+Width="+%2B+scrollbarWidth+);|code-block|syntax|javascript|1532297|entityMap^0|5|8|F|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>You can determine <code>window</code> scroll bar with <code>document</code> as below using jquery + javascript:</p>

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


blocks|key|1317194|text|来自David+Walsh's+blog|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1317195|​|1317196|//+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);|code-block|syntax|javascript|1317197|.scrollbar-measure+{
	width:+100px;
	height:+100px;
	overflow:+scroll;
	position:+absolute;
	top:+-9999px;
}|1317198|1317199|在我的网站上有17个，在Stackoverflow上有14个。|1317200|entityMap|0|LINK|mutability|MUTABLE|url|https://davidwalsh.name/detect-scrollbar-width^0|2|I|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>From <a href="https://davidwalsh.name/detect-scrollbar-width" rel="noreferrer">David Walsh's blog</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}</code></pre>
</div>
</div>
</p>

<p>Gives me 17 on my website, 14 here on Stackoverflow.</p>


blocks|key|1532374|text|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;
++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1532375|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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;
  }
</code></pre>


blocks|key|1317291|text|创建一个空的div，并确保它出现在所有页面上(例如，通过将它放入header模板)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1317292|给它设置这样的样式：|1317293|#scrollbar-helper+{
++++//+Hide+it+beyond+the+borders+of+the+browser
++++position:+absolute;
++++top:+-100%25;

++++//+Make+sure+the+scrollbar+is+always+visible
++++overflow:+scroll;
}|code-block|syntax|javascript|1317294|然后简单地用Javascript检查#scrollbar-helper的大小：|1317295|var+scrollbarWidth+=+document.getElementById('scrollbar-helper').offsetWidth;
var+scrollbarHeight+=+document.getElementById('scrollbar-helper').offsetHeight;|1317296|不需要计算任何东西，因为此div将始终具有scrollbar的width和height。|1317297|唯一的缺点是您的模板中将有一个空的div。但另一方面，你的Javascript文件会更干净，因为这只需要1到2行代码。|1317298|entityMap^0|6|3|W|6|0|0|0|I|H|0|0|D|3|L|9|V|5|11|6|0|H|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|V|$]]

<p>Create an empty <code>div</code> and make sure it's present on all pages (i.e. by putting it in the <code>header</code> template).</p>

<p>Give it this styling:</p>

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

    // Make sure the scrollbar is always visible
    overflow: scroll;
}
</code></pre>

<p>Then simply check for the size of <code>#scrollbar-helper</code> with Javascript:</p>

<pre><code>var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;
</code></pre>

<p>No need to calculate anything, as this <code>div</code> will always have the <code>width</code> and <code>height</code> of the <code>scrollbar</code>.</p>

<p>The only downside is that there will be an empty <code>div</code> in your templates.. But on the other hand, your Javascript files will be cleaner, as this only takes 1 or 2 lines of code.</p>


blocks|key|1532536|text|对我来说，最有用的方法是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532537|(window.innerWidth+-+document.getElementsByTagName('html')[0].clientWidth)|code-block|syntax|javascript|1532538|和香草JavaScript一起。|1532539|​|1532540|📷|atomic|offset|length|1532541|1532542|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/2b3a5a7787bdfde0b07ecda19b340c34.png|imageAlt^0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|13|8|@]|9|@$N|14|O|15|1|16]]|A|$]]|$1|P|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

<p>For me, the most useful way was</p>

<pre><code>(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)
</code></pre>

<p>with vanilla JavaScript.</p>

<p><a href="https://i.stack.imgur.com/cDglu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cDglu.png" alt="enter image description here"></a></p>


blocks|key|1317416|text|这应该行得通，不是吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317417|function+getScrollbarWidth()+{
++return+(window.innerWidth+-+document.documentElement.clientWidth);
}|code-block|syntax|javascript|1317418|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This should do the trick, no?</p>

<pre><code>function getScrollbarWidth() {
  return (window.innerWidth - document.documentElement.clientWidth);
}
</code></pre>


blocks|key|1317464|text|以下是基于偏移宽度差的更简洁、更易于阅读的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317465|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;

}|code-block|syntax|javascript|1317466|请参阅JSFiddle。|offset|length|1317467|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/slavafomin/tsrmgcu9/^0|0|0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Here's the more concise and easy to read solution based on offset width difference:</p>

<pre class="lang-typescript prettyprint-override"><code>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;

}
</code></pre>

<p>See the <a href="http://jsfiddle.net/slavafomin/tsrmgcu9/" rel="nofollow noreferrer">JSFiddle</a>.</p>


blocks|key|1317531|text|已经在我的库中编写了代码，所以如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317532|var+vScrollWidth+=+window.screen.width+-+window.document.documentElement.clientWidth;|code-block|syntax|javascript|1317533|值得一提的是，jQuery+$(window).width()也可以用来代替window.document.documentElement.clientWidth。|offset|length|style|CODE|1317534|如果你在右边的firefox中打开开发人员工具，它不会起作用，但如果在底部打开devs窗口，它就会克服它！|1317535|quirksmode.org支持window.screen！|1317536|玩得开心!|1317537|entityMap|0|LINK|mutability|MUTABLE|url|https://www.quirksmode.org/dom/w3c_cssom.html^0|0|0|E|H|12|17|0|0|G|D|0|E|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@$I|19|J|1A|K|L]]|9|@$I|1B|J|1C|1|1D]]|A|$]]|$1|Q|3|R|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Already coded in my library so here it is:</p>

<pre><code>var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;
</code></pre>

<p>I should mention that jQuery <code>$(window).width()</code> can also be used instead of <code>window.document.documentElement.clientWidth</code>.</p>

<p>It doesn't work if you open developer tools in firefox on the right but it overcomes it if the devs window is opened at bottom!</p>

<p><code>window.screen</code> is supported <a href="https://www.quirksmode.org/dom/w3c_cssom.html" rel="nofollow noreferrer">quirksmode.org</a>!</p>

<p>Have fun!</p>


blocks|key|1532831|text|function+getScrollBarWidth()+{
++++return+window.innerWidth+-+document.documentElement.clientWidth;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1532832|大多数浏览器使用15px作为滚动条宽度|unstyled|1532833|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function getScrollBarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
}
</code></pre>
<p>Most of the browser use 15px for the scrollbar width</p>


blocks|key|1317683|text|它似乎是有效的，但也许有一个更简单的解决方案，可以在所有浏览器上工作？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317684|​|1317685|//+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);|code-block|syntax|javascript|1317686|.scrollbar-measure+{
	width:+100px;
	height:+100px;
	overflow:+scroll;
	position:+absolute;
	top:+-9999px;
}|1317687|1317688|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>It seems to work, but maybe there is a simpler solution that works in all browsers?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}</code></pre>
</div>
</div>
</p>


blocks|key|1533042|text|我更新了@Matthew+Vines的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533043|它更容易阅读，更容易理解。它不需要内部元素。为获取滚动条宽度而创建的元素具有100%25的高/宽，因此它不会在低端PC/手机上的主体上创建任何可见的滚动条，这可能会花费更多的时间来创建元素，获取宽度，最后删除元素。|1533044|const+getScrollBarWidth+=+()+=>+{
++const+e+=+document.createElement('div');
++Object.assign(e.style,+{
++++width:+'100%25',
++++height:+'100%25',
++++overflow:+'scroll',
++++position:+'absolute',
++++visibility:+'hidden',
++++top:+'0',
++++left:+'0',
++});

++document.body.appendChild(e);

++const+scrollbarWidth+=+e.offsetWidth+-+e.clientWidth;

++document.body.removeChild(e);

++return+scrollbarWidth;
};

console.log(getScrollBarWidth());|code-block|syntax|javascript|1533045|我建议只在页面加载时检查一次滚动条宽度(除非它不符合您的需要)，然后将结果存储在状态/变量中。|1533046|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I made an updated version of @Matthew Vines answer.</p>
<p>It's easier to read, easier to understand. It doesn't require an inner element. The element created to get the scroll bar width has a 100% height/width so it doesn't create any visible scroll bar on the body on lower end PCs/mobiles which could take a bit more time to create the element, get the widths, and finally remove the element.</p>
<pre class="lang-js prettyprint-override"><code>const getScrollBarWidth = () =&gt; {
  const e = document.createElement('div');
  Object.assign(e.style, {
    width: '100%',
    height: '100%',
    overflow: 'scroll',
    position: 'absolute',
    visibility: 'hidden',
    top: '0',
    left: '0',
  });

  document.body.appendChild(e);

  const scrollbarWidth = e.offsetWidth - e.clientWidth;

  document.body.removeChild(e);

  return scrollbarWidth;
};

console.log(getScrollBarWidth());
</code></pre>
<p>I do recommend to check for the scroll bar width only once, at page load (except if it doesn't fit your needs) then store the result in a state/variable.</p>


blocks|key|1317863|text|我在material-ui代码中找到了这个解决方案，它对我很有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1317864|const+scrollbarWidth+=+window.innerWidth+-++document.querySelector('body').clientWidth;|code-block|syntax|javascript|1317865|entityMap^0|2|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I've found that solution in the <code>material-ui</code> code and it works for me.</p>
<pre><code>const scrollbarWidth = window.innerWidth -  document.querySelector('body').clientWidth;
</code></pre>


blocks|key|1317933|text|您可以使用此解决方案来查找网页中任何元素的滚动条宽度，而不是网页本身。您还可以重写它，以便在水平滚动条的情况下使用滚动条高度工作，方法是将与宽度相关的属性替换为与高度相关的属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317934|offsetWidth属性返回内容、填充、边框和滚动条(如果有)的总宽度。而clientWidth属性仅返回内容和填充的总宽度。|offset|length|style|CODE|1317935|因此，如果我们从offsetWidth中减去clientWidth和水平边框，我们将得到滚动条的宽度。也就是说，如果有任何滚动条，我们将获得滚动条的宽度。但是如果没有任何滚动条，我们将获得0。|1317936|const+element+=+document.querySelector("div");
const+elementStyle+=+window.getComputedStyle(element);
const+horizontalBorder+=+parseFloat(elementStyle.borderLeftWidth)+%2B+parseFloat(elementStyle.borderRightWidth);
const+scrollbarWidth+=+element.offsetWidth+-+element.clientWidth+-+horizontalBorder+%2B+"px";|code-block|syntax|javascript|1317937|entityMap^0|0|0|B|12|B|0|8|B|M|B|2M|1|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$]]

<p>You can use this solution to find the scrollbar width of any element inside the webpage rather than the webpage itself. You can also rewrite it to work for scrollbar height in the case of horizontal scrolbars by replacing its width related properties with their height related counterparts.</p>
<p>The <code>offsetWidth</code> property returns the total width of content, padding, border, and scrollbar (if there is any). Whereas, <code>clientWidth</code> property returns only the total width of content and padding.</p>
<p>So, if we substract <code>clientWidth</code> and horizontal border from <code>offsetWidth</code>, we will be left with the width of the scrollbar. That is to say, if there is any scrollbar, we will get the width of the scrollbar. But if there isn't any scrollbar, we will get <code>0</code>.</p>
<pre><code>const element = document.querySelector(&quot;div&quot;);
const elementStyle = window.getComputedStyle(element);
const horizontalBorder = parseFloat(elementStyle.borderLeftWidth) + parseFloat(elementStyle.borderRightWidth);
const scrollbarWidth = element.offsetWidth - element.clientWidth - horizontalBorder + &quot;px&quot;;
</code></pre>


<p>How can I determine the height of a horizontal scrollbar, or the width of a vertical one, in JavaScript?</p>


How can I get the browser's scrollbar sizes?

Windows

jQuery

如何在JavaScript中确定水平滚动条的高度或垂直滚动条的宽度？

问如何获取浏览器的滚动条大小？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取浏览器的滚动条大小？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取浏览器的滚动条大小？
EN