Question

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

Answer 1

来自Alexandre Gomes Blog我还没试过。让我知道它是否适合你。

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上测试了2012-03-28最新的FF，Chrome，IE＆amp; Safari和100％工作。

来源：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)

使用vanilla JavaScript。

Answer 8

来自David Walsh's blog：

＆＃13;

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

＆＃13;

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

＆＃13;

在我的网站上给了我17个，在Stackoverflow上给了我14个。

Answer 9

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

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

如果没有horzintscrollbar存在，该功能将重新调整0

Answer 10

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

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

Answer 11

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 12

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

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

Answer 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中测试过。

Answer 14

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 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的{{1}}和height。

唯一的缺点是模板中会有一个空的scrollbar ..但另一方面，你的Javascript文件会更干净，因为这只需要1或2行代码。

Answer 16

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

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

Answer 17

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

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

Answer 18

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

Answer 19

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

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。

Answer 20

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

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

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

如果您在右侧的firefox中打开开发人员工具，则不起作用，但如果在底部打开了devs窗口，则可以克服该问题！

window.screen受支持quirksmode.org！

玩得开心！

Answer 21

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

然而在我的情况下它没有用。我花了几个小时寻找解决方案最后，我回到了上面的代码并添加了！对每种风格都很重要。它奏效了。
我无法在原始答案下面添加评论。所以这是修复：

filePath

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

Answer 23

我制作了@Matthew Vines答案的更新版本。

它更易于阅读，更易于理解。它不需要内部元素。为获得滚动条宽度而创建的元素具有100％的高度/宽度，因此在低端PC /移动设备上的机身上不会创建任何可见的滚动条，这可能会花费更多的时间来创建元素并获得宽度，最后删除该元素。

const getScrollBarWidth = () => {
  const e = document.createElement('div');
  Object.assign(e.style, {
    width: '100%',
    height: '100%',
    overflow: 'scroll',
    position: 'absolute',
    visibility: 'hidden',
    top: '0',
    left: '0',
  });

  document.body.appendChild(e);

  const scrollbarWidth = e.offsetWidth - e.clientWidth;

  document.body.removeChild(e);

  return scrollbarWidth;
};

console.log(getScrollBarWidth());

我建议仅在页面加载时检查滚动条宽度一次（除非它不符合您的需求），然后将结果存储在状态/变量中。

Answer 24

我在 material-ui 代码中找到了该解决方案，并且对我有用。

const scrollbarWidth = window.innerWidth -  document.querySelector('body').clientWidth;

Answer 25

您可以使用此解决方案来查找网页内任何元素而不是网页本身的滚动条宽度。您还可以将其重写为在水平滚动条的情况下适用于滚动条高度，方法是将其宽度相关属性替换为高度相关属性。

offsetWidth 属性返回内容、内边距、边框和滚动条（如果有）的总宽度。而 clientWidth 属性仅返回内容和填充的总宽度。

因此，如果我们从 clientWidth 中减去 offsetWidth 和水平边框，我们将留下滚动条的宽度。也就是说，如果有滚动条，我们会得到滚动条的宽度。但是如果没有任何滚动条，我们将得到 0。

const element = document.querySelector("div");
const elementStyle = window.getComputedStyle(element);
const horizontalBorder = parseFloat(elementStyle.borderLeftWidth) + parseFloat(elementStyle.borderRightWidth);
const scrollbarWidth = element.offsetWidth - element.clientWidth - horizontalBorder + "px";

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

25 个答案: