logo标签列表

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

javascriptscrollbar
188

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

2
这是来自JQuery Dimension插件作者的片段。http://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js 或许现在提供这个解决方案有点晚了，但在我看来，这似乎是一个更好的解决方案。 - Yanick Rochon
请查看此解决方案：http://davidwalsh.name/detect-scrollbar-width - GibboK
@GibboK，那个解决方案失败了——offsetWidth == clientWidth，所以它总是零。这在Edge IE和Chrome中进行了测试。 - beauXjames
1
@beauXjames 奇怪，它在我的火狐浏览器上可以工作。 - GibboK
这个问题出现在滚动条位置错误的情况下（可能在屏幕中间某处）。在这种情况下，您可能不想显示滚动条。在大多数情况下，我发现iScroll是解决这种情况的完美设计中立解决方案：http://iscrolljs.com - Mr. Hugo
26个回答
151

来源于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);
};
2
这个想法太棒了，我一定会基于此创建一个 MooTools 类。 - Ryan Florence
是的，我也得到了同样的谷歌搜索结果。 :) 我正在努力并会让您及时知道。 - glmxndr
在Windows中将主题更改为Extra Large，以正常大小再次检查，计算似乎是正确的。我显然数错了。 - glmxndr
1
请参考以下内容，了解如何计算工具栏、地址栏和其他导航工具的高度：https://dev59.com/nk_Ta4cB1Zd3GeqPB5PG#3417992 - Yanick Rochon
6
在Win7操作系统的Opera和Firefox浏览器中，页面缩放比例不同时返回不同的数值。 - Kolyunya
显示剩余4条评论
85
使用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;
};
2
谢谢，这个解决方案非常简洁！！ - jherax
4
如果将整个jQuery源代码复制粘贴到这个解决方案中，这个解决方案是否真的会更加简洁？ 因为这基本上就是这个解决方案所做的。这个问题并没有要求使用jQuery进行回答，而且完全可以不使用库来执行此任务，并且效率也很高。 - user2490157
8
如果你已经在使用 JQuery，那么Daemon的评论就不相关了。是的，仅仅为了做这件事而添加JQuery是毫无意义的，但对于那些已经在项目中使用JQuery的人来说，这比被接受的解决方案更加“简单”。 - Tyler Dahle
28
对我而言, 最有用的方法是:

For me, the most useful way was

(window.innerWidth - document.documentElement.clientWidth)

使用原生的JavaScript。

输入图片描述

9
正是我需要的。一个建议：第二个术语可以替换为 document.documentElement.clientWidth。 documentElement 更清晰、更干净地表达了获取 <html> 元素的意图。 - Jan Miksovsky
如果您正在使用JS，则最好且最简单的解决方案！ - benmneb
如果窗口没有垂直滚动条，则返回0。这可能是您想要的，也可能不是。 - Pang
25

这是我找到的唯一一个在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()); });

2012年3月28日在最新版本的FF、Chrome、IE和Safari上测试通过，适用于Windows 7操作系统，百分之百可行。

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

13
在这段代码中，width的值始终为undefined。可以写成 if (true) { ... } 来达到同样的效果。 - sstur
3
更正：第一次调用函数时，width 将始终等于未定义（undefined）。在对函数进行后续调用时，width 已经被设置，该检查只是为了避免不必要地再次运行计算。 - MartinAnsty
17
@MartinAnsty但是[width]变量是在函数内部声明的，因此每次调用该函数时都会重新创建它。 - MadSkunk
4
如果您查看源代码，就会发现它在外部函数闭包中声明。 - TheCloudlessSky
3
为了强调@sstur和@TheCloudlessSky所说的，上面的代码与Ben Alman插件中的代码不同，并且它不会将结果缓存到“width”中，而是每次都重新计算。虽然这可以工作，但非常低效。请行个方便，使用Alman插件中的正确版本。 - hashchange
显示剩余2条评论
25

如果你要进行简单的操作，只需混合使用普通的Dom JS和jQuery。

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

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

11
如果窗口没有滚动条（比如大屏幕或小页/应用），这个操作将失败。 - Farid Nouri Neshat
1
这正是我想要的。 - azerafati
1
对于那些不使用jQuery的人来说，$(element).width()是什么意思？如何在没有jQuery的情况下编写它？ - Micah Zoltu
17
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
1
代码更短了，但浏览器必须重新绘制整个页面，因此速度非常慢。 - Adrian Maire
9
我发现一个简单的解决方案适用于页面内的元素，而不是整个页面本身：$('#element')[0].offsetHeight - $('#element')[0].clientHeight。这将返回x轴滚动条的高度。
太棒了!! 你让我的一天变得美好 :) 对于纵向滚动条，使用“.offsetWidth”和“.clientWidth”同样有效。 - Polosson
1
很不幸，似乎并不是完全可靠的，至少对于宽度而言。在Linux下，无论是FireFox还是Chrome，.clientWidth似乎都会将滚动条宽度的一半计算在内。 - Michael Scheper
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分。

5
你可以使用jquery + javascript来确定文档中的window滚动条，如下所示：

window 滚动条可以通过以下代码与 document 相关联：

var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );
注意，innerWidth仅适用于IE9+。否则是一个很好的解决方案。 - Pål Thingbø
5
这应该就可以解决问题了，对吧？
function getScrollbarWidth() {
  return (window.innerWidth - document.documentElement.clientWidth);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接