blocks|key|219186|text|如果子对象采用容器的整个宽度(不包括scrollbar+(默认值))，则可以减去宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219187|var+child+=+document.querySelector(".somethingBig");
var+scrollbarWidth+=+child.parentNode.offsetWidth+-+child.offsetWidth;|code-block|syntax|javascript|219188|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>If the child takes the full width of the container excluding scrollbar (the default), then you can subtract the widths:</p>

<pre><code>var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;
</code></pre>


blocks|key|219219|text|我使用next函数来获取滚动条的高度/宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219220|function+getBrowserScrollSize(){

++++var+css+=+{
++++++++"border":++"none",
++++++++"height":++"200px",
++++++++"margin":++"0",
++++++++"padding":+"0",
++++++++"width":+++"200px"
++++};

++++var+inner+=+$("<div>").css($.extend({},+css));
++++var+outer+=+$("<div>").css($.extend({
++++++++"left":+++++++"-1000px",
++++++++"overflow":+++"scroll",
++++++++"position":+++"absolute",
++++++++"top":++++++++"-1000px"
++++},+css)).append(inner).appendTo("body")
++++.scrollLeft(1000)
++++.scrollTop(1000);

++++var+scrollSize+=+{
++++++++"height":+(outer.offset().top+-+inner.offset().top)+%7C%7C+0,
++++++++"width":+(outer.offset().left+-+inner.offset().left)+%7C%7C+0
++++};

++++outer.remove();
++++return+scrollSize;
}|code-block|syntax|javascript|219221|这个基于jQuery的解决方案适用于IE7%2B和所有其他现代浏览器(包括滚动条高度/宽度为0的移动设备)。|219222|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>I've used next function to get scrollbar height/width:</p>

<pre><code>function getBrowserScrollSize(){

    var css = {
        "border":  "none",
        "height":  "200px",
        "margin":  "0",
        "padding": "0",
        "width":   "200px"
    };

    var inner = $("&lt;div&gt;").css($.extend({}, css));
    var outer = $("&lt;div&gt;").css($.extend({
        "left":       "-1000px",
        "overflow":   "scroll",
        "position":   "absolute",
        "top":        "-1000px"
    }, css)).append(inner).appendTo("body")
    .scrollLeft(1000)
    .scrollTop(1000);

    var scrollSize = {
        "height": (outer.offset().top - inner.offset().top) || 0,
        "width": (outer.offset().left - inner.offset().left) || 0
    };

    outer.remove();
    return scrollSize;
}
</code></pre>

<p>This jQuery-based solutions works in IE7+ and all other modern browsers (including mobile devices where scrollbar height/width will be 0).</p>


blocks|key|437423|text|这里有一个使用jQuery的简单方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437424|var+scrollbarWidth+=+jQuery('div.withScrollBar').get(0).scrollWidth+-+jQuery('div.withScrollBar').width();|code-block|syntax|javascript|437425|基本上，我们从总宽度中减去可滚动宽度，这应该得到滚动条的宽度。当然，您可能希望缓存jQuery('div.withScrollBar')选择，这样就不会重复执行该部分。|437426|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>Here's an easy way using jQuery.</p>

<pre><code>var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();
</code></pre>

<p>Basically we subtract the scrollable width from the overall width and that should provide the scrollbar's width. Of course, you'd want to cache the jQuery('div.withScrollBar') selection so you're not doing that part twice.</p>


blocks|key|219314|text|this为我工作..|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|219315|+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);+
}|code-block|syntax|javascript|219316|entityMap|0|LINK|mutability|MUTABLE|url|http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php^0|0|4|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><a href="http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php" rel="nofollow">this</a> worked for me.. </p>

<pre><code> function getScrollbarWidth() { 
    var div = $('&lt;div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"&gt;&lt;div style="height:100px;"&gt;&lt;/div&gt;'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}
</code></pre>


blocks|key|437499|text|假设容器只在页面上出现一次，并且您使用的是jQuery，那么：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437500|var+containerEl+=+$('.container')[0];
var+scrollbarWidth+=+containerEl.offsetWidth+-+containerEl.clientWidth;|code-block|syntax|javascript|437501|另请参阅this+answer了解更多详细信息。|offset|length|437502|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/23494468/detect-different-kind-of-scrollbars-eg-normal-hidden-osx/32490737#32490737^0|0|0|4|B|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>Assuming container is only on page once and you are using jQuery, then:</p>

<pre><code>var containerEl = $('.container')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;
</code></pre>

<p>Also see <a href="https://stackoverflow.com/questions/23494468/detect-different-kind-of-scrollbars-eg-normal-hidden-osx/32490737#32490737">this answer</a> for more details.</p>


blocks|key|437516|text|我认为这将是简单而快速的-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437517|var+scrollWidth=+window.innerWidth-$(document).width()|code-block|syntax|javascript|437518|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>I think this will be simple and fast -</p>

<pre><code>var scrollWidth= window.innerWidth-$(document).width()
</code></pre>


<p>The following HTML will display a scroll bar on the right inside edge of div.container.</p>

<p>Is it possible to determine the width of that scroll bar?</p>

<pre><code>&lt;div class="container" style="overflow-y:auto; height:40px;"&gt;
  &lt;div class="somethingBig"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>


Getting scroll bar width using JavaScript

容器

jQuery

下面的超文本标记语言将在div.container的右内边缘显示滚动条。可以确定滚动条的宽度吗？<div class="container" style="overflow-y:auto; height:40px;">  <div class="somethingBig"></div></div>

问使用JavaScript获取滚动条宽度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript获取滚动条宽度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript获取滚动条宽度
EN