如何计算滚动条的宽度？

Question

给定一个<textarea>固定的width,我希望它的"有效宽度"是常数(in px)."活动宽度"是指文本出现的区域.

当没有出现垂直滚动条时,"活动宽度"等于width.但是,当出现垂直滚动条时,"活动宽度"变得小于width(我猜测精确地小于滚动条的宽度).

我想确定是否出现垂直滚动条,如果是,则增加<textarea>滚动条宽度的宽度.如何识别滚动条的宽度？

有更好的方法吗？

(我对Firefox感兴趣,如果它让生活变得更轻松.)

Answer 1

有一个jQuery插件,可以帮助这一点:https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

此外,来自http://www.alexandre-gomes.com/?p=115 这里有一些可能有用的代码.

这会<p>在<div>带有滚动条的内部创建100%宽度的隐藏元素,然后计算<div>宽度 - <p>宽度=滚动条宽度.

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

滚动条宽度是无边界的简单(offsetWidth - clientWidth)!元件.此函数可以即时计算并缓存结果以供进一步使用.无需百分比宽度等.

var getScrollbarWidth = function() {
  var div, width = getScrollbarWidth.width;
  if (width === undefined) {
    div = document.createElement('div');
    div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
    div = div.firstChild;
    document.body.appendChild(div);
    width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
    document.body.removeChild(div);
  }
  return width;
};

Answer 3

我相信这是一个更直接的解决方案：（假设body {width:100%;}）

function calculateScrollBarWidth() {
  return window.innerWidth - document.body.clientWidth;
}

计算任何元素滚动条宽度的解决方案（例如带有溢出的 div 或文本区域）

function calculateScrollbarWidth(element) {
  if (!element) {
    // Return the body scrollbar width, when no element was specified.
    return window.innerWidth - document.body.clientWidth;
  } else {
    // When an element is specified, return its specific scrollbar width.
    return element.offsetWidth - element.clientWidth;
  }
}

Answer 4

也许你可以放

overflow-y:scroll;

在你的CSS.即使文本区域为空白,这也会强制滚动条出现,因此宽度始终保持不变.