如何获得浏览器的滚动条大小？

我怎样才能确定一个水平滚动条的高度，或在javascript中垂直的宽度？

Answer 1

从亚历山大戈麦斯博客我还没有尝试过。 让我知道，如果它适合你。

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); }; 

Answer 2

使用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; }; 

Answer 3

这只是我发现的脚本，它在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浏览器上testing2012年3月28日在Windows 7和100％的工作。

来源： http : //benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

Answer 4

如果你正在寻找一个简单的操作，只需要混合普通的js和jquery，

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

返回当前页面滚动条的大小。 （如果它是可见的，否则将返回0）

Answer 5

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

Answer 6

我发现了一个简单的解决scheme，可以用于页面内部的元素，而不是页面本身： $('#element')[0].offsetHeight - $('#element')[0].clientHeight

这将返回x轴滚动条的高度。

Answer 7

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

Answer 8

 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，IE11testing。

Answer 9

如果你已经有一个滚动条的元素使用：

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

如果没有horzintscrollbar目前的function将retun 0

Answer 10

你可以使用jquery + javascript来确定document window滚动条，如下所示：

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

Answer 11

来自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; } 

Answer 12

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

Answer 13

与jQuery（只在Firefox中testing）：

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

但我其实更喜欢@史蒂夫的回答。

Answer 14

这是一个很好的答案： https : //stackoverflow.com/a/986977/5914609

但在我的情况下，它没有工作。 我花了数小时寻找解决scheme。
最后，我已经回到上面的代码，并添加！重要的每种风格。 它的工作。
我不能在原来的答案下添加评论。 所以这里是修复：

 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); }; 

Answer 15

这个人生的决定会给你机会find浏览器的scrollY宽度 （香草JavaScript）。 使用这个例子，你可以在任何元素上得到scrollY的宽度，包括那些根据你当前的devise概念不需要滚动的元素：

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