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

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

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

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

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

这只是我发现的脚本,它在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

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

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

返回当前页面滚动条的大小。 (如果它是可见的,否则将返回0)

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

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

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

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

 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。

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

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

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

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

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

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

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

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

这是一个很好的答案: 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); }; 

这个人生的决定会给你机会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; }