Javascript 如何获取浏览器'；滚动条的大小是多少？

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

---

这是我找到的唯一一个在webkit浏览器中工作的脚本…：）

2012-03-28在Windows 7上以最新的FF、Chrome、IE和Safari进行测试，100%工作

---

来源：

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

函数getScrollBarWidth（）{ var$outer=$（''）.css（{visibility:'hidden'，width:100，overflow:'scroll'}）.appendTo（'body'）， widthWithScroll=$（''）.css（{width:'100%}）.appendTo（$outer.outerWidth（）； $outer.remove（）； 返回100-带croll的宽度； };

---

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

函数滚动条大小（）{
var div=$(
''
+ ''
);
$（'body'）。追加（div）；
var w1=$（div）.innerWidth（）；
var w2=$（'div'，div）.innerWidth（）；
$（div.remove（）；
返回w1-w2；
};

---

代码如下：

如果您想要一个简单的操作，只需混合使用普通dom js和jquery

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

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

---

在Chrome、FF、IE8、IE11中进行了测试。

我发现了一个简单的解决方案，它适用于页面内部的元素，而不是页面本身：

$（'#元素'）[0]。视线外-$（'#元素'）[0]。客户端重量

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

使用jquery（仅在firefox中测试）：

函数getScrollBarHeight（）{ var jTest=$（'

'）； $（'body'）.append（jTest）； var h=jTest.innerHeight（）； jTest.css({ 溢出：“自动”， 宽度：“200px” }); var h2=jTest.innerHeight（）； 返回h-h2； } 函数getScrollBarWidth（）{ var jTest=$（''）； $（'body'）.append（jTest）； var w=jTest.innerWidth（）； jTest.css({ 溢出：“自动”， 高度：“200px” }); var w2=jTest.innerWidth（）； 返回w-w2； }

---

但实际上我更喜欢@Steve的答案。

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

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

如果没有horzintscrollbar，函数将重新运行0

这是一个很好的答案：

然而，在我的情况下，它不起作用。我花了数小时寻找解决方案。
最后，我返回到上面的代码并添加了！对每种风格都很重要。它成功了。
我无法在原始答案下方添加评论。下面是修复方法：

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

---

您可以使用jquery+javascript使用

document

确定

window

滚动条，如下所示：

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

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

发件人：

//创建度量节点
var scrollDiv=document.createElement（“div”）；
scrollDiv.className=“滚动条测量”；
document.body.appendChild（scrollDiv）；
//获取滚动条的宽度
var scrollbarWidth=scrollDiv.offsetWidth-scrollDiv.clientWidth；
console.info（滚动条宽度）；//Mac:15
//删除DIV
document.body.removeChild（scrollDiv）
。滚动条测量{
宽度：100px；
高度：100px；
溢出：滚动；
位置：绝对位置；
顶部：-9999px；
}
这个生活黑客的决定将让你有机会找到浏览器滚动宽度（普通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;
}

创建一个空的
div
，并确保它出现在所有页面上（即，将其放入
标题
模板中）

给它这个样式：

#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).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );

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

无需计算任何内容，因为此
div
将始终具有
滚动条的
宽度
和
高度

唯一的缺点是模板中会有一个空的
div
。。但另一方面，您的Javascript文件将更干净，因为这只需要1或2行代码。
对我来说，最有用的方法是

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

用香草JavaScript

这应该能奏效，不是吗

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

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

函数getScrollbarWidth（）：number{
//创建不可见容器
const outer=document.createElement（'div'）；
outer.style.visibility='hidden'；
outer.style.overflow='scroll'；//强制显示滚动条
outer.style.msOverflowStyle='scrollbar'；//WinJS应用程序需要
文件.正文.附件（外部）；
//创建内部元素并将其放置在容器中
const inner=document.createElement（'div'）；
外部。子对象（内部）；
//计算容器的全宽度和子宽度之间的差异
常量scrollbarWidth=（outer.offsetWidth-inner.offsetWidth）；
//从DOM中删除临时元素
outer.parentNode.removeChild（outer）；
返回滚动条宽度；
}

请参阅已在我的库中编码的。
，因此它位于：

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

我应该提到jQuery
$（window.width（）
也可以用来代替
window.document.documentElement.clientWidth

如果你在右边的firefox中打开开发者工具，它不起作用，但是如果在底部打开devs窗口，它就克服了这个问题

窗口。支持屏幕

玩得开心

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

大多数浏览器使用15px作为滚动条宽度，这似乎可行，但也许有一种更简单的解决方案可以在所有浏览器中使用


//创建度量节点
var scrollDiv=document.createElement（“div”）；
scrollDiv.className=“滚动条测量”；
document.body.appendChild（scrollDiv）；
//获取滚动条的宽度
var scrollbarWidth=scrollDiv.offsetWidth-scrollDiv.clientWidth；
console.info（滚动条宽度）；//Mac:15
//删除DIV
document.body.removeChild（scrollDiv）
。滚动
var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;

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

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

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

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