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

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

这是JQuery Dimension插件作者的摘录。 github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/…可能来不及提供这种解决方案，但对我来说，IMO似乎是一个更好的解决方案。

看看这个解决方案：davidwalsh.name/detect-scrollbar-width

@GibboK-该解决方案失败-offsetWidth == clientWidth，因此始终为零。已在Edge IE && Chrome中进行了测试。

@beauXjames很奇怪，它在FF上对我有效

在滚动条位于错误位置（屏幕中间的某个位置）的情况下会出现此问题。在这种情况下，您可能不想显示滚动条。在大多数情况下，我发现iScroll是针对这种情况的完美设计中立解决方案：iscrolljs.com

#1 楼

从Alexandre Gomes博客开始，我还没有尝试过。让我知道它是否对您有用。

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

这个想法很天才，我肯定是在此基础上制作MooTools类。

–瑞安·弗洛伦斯（Ryan Florence）
2009年6月12日14:40

是的，我得到了相同的Google结果。 :)我正在努力让您知情。

– glmxndr
2009年6月12日14:50

如果将主题更改为具有不同大小滚动条的主题，则计算出的实际偏差是多少？

–马修·维尼斯（Matthew Vines）
09年6月12日在16:35

参见交叉参考：stackoverflow.com/questions/3417139/…

– Yanick Rochon
2010年8月5日在18:42

使用不同的页面缩放返回不同的值。 Win7，Opera，FF。

–科林尼亚
13年3月7日在8:59

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

谢谢，这个解决方案很干净！！

– jherax
2014年4月24日在3:47

如果将JQuery的整个源代码复制到该解决方案之前，此解决方案真的会更干净吗？因为这几乎就是该解决方案正在做的事情。这个问题并没有在JQuery中要求答案，并且完全可以并且高效地执行此任务而无需使用库。

–user2490157
17年8月19日在17:19

如果您已经在使用JQuery，则Daemon的注释是无关紧要的。是的，仅仅为了做到这一点而添加JQuery就是胡说八道，但是对于那些已经在其项目中使用JQuery的人来说，这是一个比公认的解决方案“简单得多”的解决方案。

–泰勒·达勒（Tyler Dahle）
17年5月5日在17:14

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

在Windows 7上最新的FF中测试了2012-03-28 ，Chrome，IE和Safari以及100％正常工作。

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

宽度将始终===在该代码中未定义。如果（true）{...}

–sstur
13年7月26日在15:21

纠正：宽度将始终===首次调用该函数时未定义。在对函数宽度的后续调用中，已经设置了该宽度，该检查只是防止不必要地再次运行计算。

– MartinAnsty
13年8月1日在10:49

@MartinAnsty但是[width]变量是在函数内部声明的，因此每次调用该函数时都会重新创建它。

– MadSkunk
13年8月14日在8:57

@MartinAnsty，如果您查看源代码，则在外部闭包中声明它。

– TheCloudlessSky
13-10-24在17:20

只是为了加强@sstur和@TheCloudlessSky的观点，上面的代码与Ben Alman插件中的代码不同，并且不会缓存宽度的结果，而是每次都重新计算。它可以工作，但是效率很低。请帮个忙，在Alman的插件中使用正确的版本。

– hashchange
2014年11月27日13:51

#4 楼

如果您正在寻找简单的操作，只需将普通dom js和jquery混合使用，

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

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

如果窗口没有滚动条（大监视器或小页面/应用程序），此操作将失败

–法里·诺里·内沙特（Farid Nouri Neshat）
2014年8月8日19:06

这正是我想要的

–azerafati
15年4月26日在8:08

对于那些不使用jQuery的人，$（element）.width（）有什么作用？没有jQuery怎么写？

–米卡·佐尔图（Micah Zoltu）
11月29日16:57

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

首先尝试了接受的答案，但发现在Windows 8的Firefox中该功能不再起作用。切换到此变种，可以很好地完成工作。

–Matijs
2014年3月13日9:40

代码较短，但是浏览器必须重绘整个页面，因此非常慢。

– Adrian Maire
2014年10月30日在16:05

#6 楼

对我来说，最有用的方法是使用香草JavaScript。

(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)

谢谢@ stephen-kendy。一声问候。

–AndrésMoreno
18年4月12日在11:49

正是我所需要的。一个建议：第二项可以用document.documentElement.clientWidth代替。 documentElement更清楚，明确地表达了获取元素的意图。

– Jan Miksovsky
18年8月6日在17:37

#7 楼

我找到了一种适用于页面内部元素而不是页面本身的简单解决方案：
$('#element')[0].offsetHeight - $('#element')[0].clientHeight

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

很棒的一个！您很高兴：) y轴滚动条也可以与“ .offsetWidth”和“ .clientWidth”一起使用。

– Polosson
2014年9月26日在16:39

不幸的是，至少在宽度上似乎并不完全可靠。在Linux下的FireFox和Chrome中，.clientWidth似乎包括滚动条宽度的一半。

–迈克尔·谢珀（Michael Scheper）
14-10-24在5:02

#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。

#9 楼

如果您已经有带有滚动条的元素，请使用：

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

如果没有horzintscrollbar，则该函数将重新调整0

这是最好的答案。吻。统治一切

– MarcD
18年5月16日在21:41

#10 楼

您可以使用jquery + javascript通过以下方式确定window的滚动条：

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

请注意，innerWidth适用于IE9 +。否则，很好的解决方案。

–PålThingbø
17年7月7日在19:47

#11 楼

这应该可以解决问题，不是吗？

function getScrollbarWidth() {
  return (window.innerWidth - document.documentElement.clientWidth);
}

#12 楼

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

#13 楼

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中进行了测试。

#14 楼

function getScrollBarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
}

大多数浏览器使用15px作为滚动条宽度

当然，这仅在滚动条已经可见的情况下有效。有时我们需要在显示尺寸之前对其进行预测。另外，移动浏览器也不将15px用于滚动条。

–加尔·戈弗雷（Garr Godfrey）
8月26日18:52

#15 楼

创建一个空的div并确保它在所有页面上都存在（即，将其放在header模板中）。

使用以下样式：

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

    // Make sure the scrollbar is always visible
    overflow: scroll;
}

然后只需使用Javascript检查#scrollbar-helper的大小即可：

var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;

无需计算任何内容，因为此div将始终具有width的height和scrollbar 。

唯一的缺点是模板中将有一个空的div。但是，另一方面，您的Javascript文件会更整洁，因为它只需要1或2行代码。 br />

#16 楼

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

#17 楼

使用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的答案。

#18 楼

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

但是在我看来，它不起作用。我花了几个小时寻找解决方案。
最后，我回到了上面的代码，并为每种样式添加了！important。并且有效。
我无法在原始答案下方添加评论。因此，解决方法如下：

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

#19 楼

这个终生的决定将使您有机会找到浏览器的scrollY宽度（原始JavaScript）。使用此示例，您可以在任何元素上获得scrollY宽度，包括那些根据您当前的设计概念不需要滚动的元素：

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

#20 楼

以下是基于偏移宽度差异的更简洁易读的解决方案：

 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;

}

请参阅JSFiddle。

#21 楼

我已经在我的库中进行了编码，所以它是：

var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;

我应该提到，jQuery $(window).width()也可以代替window.document.documentElement.clientWidth来使用。

它如果您在右侧的firefox中打开开发人员工具不起作用，但是如果在底部打开devs窗口，则可以解决该问题。

window.screen受支持quirksmode.org！

玩得开心！

#22 楼

似乎可行，但也许有一个更简单的解决方案可在所有浏览器中使用？

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

#23 楼

我制作了@Matthew Vines答案的更新版本。
它更易于阅读，更易于理解。它不需要内部元素。为获得滚动条宽度而创建的元素具有100％的高度/宽度，因此在低端PC /移动设备上的机身上不会创建任何可见的滚动条，这可能会花费更多的时间来创建元素并获得宽度，最后删除该元素。
我建议仅在页面加载时检查滚动条宽度一次（除非它不符合您的需求，否则将结果存储在状态/变量中。

编程黑洞网