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

Question

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

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

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

在Windows 7上测试了最新的FF,Chrome,IE和Safari以及100%正常运行的2012-03-28.

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

Answer 4

如果你正在寻找一个简单的操作,只需混合普通的dom 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

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

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

Answer 7

对我来说,最有用的方式是

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

用香草JavaScript.

Answer 8

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

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

Answer 9

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

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

Answer 10

来自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.