web-dev-qa-db-ja.com

スクロールバーの幅を計算する方法は？

<textarea>を固定してwidthを使用すると、「px内で）「アクティブな幅」を一定にしたいと思います。 「アクティブな幅」とは、テキストが表示される領域を意味します。

垂直スクロールバーが表示されない場合、「アクティブな幅」はwidthに等しくなります。しかし、垂直スクロールバーが表示されると、「アクティブな幅」はwidthより小さくなります（スクロールバーの幅の分だけ正確に小さくなります）。

垂直スクロールバーが表示されるかどうかを確認し、表示される場合は<textarea>スクロールバーの幅。スクロールバーの幅を特定するにはどうすればよいですか？

より良いアプローチはありますか？

（私はFirefoxに興味があります、それが人生を楽にするなら。）

javascripthtmlwidthscrollbar
20
Misha Moroshko

これに役立つjQueryプラグインがあります： https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

また、 http://www.alexandre-gomes.com/?p=115 から以下のコードが役立ちます。

これにより、スクロールバーを使用して<p>の内部に100％の幅で非表示の<div>要素が作成され、<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); 
};
16
David Houde

スクロールバーの幅は、ボーダーレスで（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;
};
9
Semra

多分あなたは置くことができます

overflow-y:scroll;

あなたのCSSで。これにより、テキスト領域が空白の場合でもスクロールバーが表示されるため、幅は常に一定です。

7
Oliver

私は似たようなものを探していました-ここに私が見つけたものがあります

 function measureScrollbar() {
      var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body");
      var dim = {
        width: $c.width() - $c[0].clientWidth,
        height: $c.height() - $c[0].clientHeight
      };
      $c.remove();
      return dim;
    }

ソース： Slickgrid これを使用- https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L378

または

Google Closure Libraryを使用- link

/**
 * Returns the scroll bar width (represents the width of both horizontal
 * and vertical scroll).
 *
 * @param {string=} opt_className An optional class name (or names) to apply
 *     to the invisible div created to measure the scrollbar. This is necessary
 *     if some scrollbars are styled differently than others.
 * @return {number} The scroll bar width in px.
 */
goog.style.getScrollbarWidth = function(opt_className) {
  // Add two hidden divs.  The child div is larger than the parent and
  // forces scrollbars to appear on it.
  // Using overflow:scroll does not work consistently with scrollbars that
  // are styled with ::-webkit-scrollbar.
  var outerDiv = goog.dom.createElement('div');
  if (opt_className) {
    outerDiv.className = opt_className;
  }
  outerDiv.style.cssText = 'overflow:auto;' +
      'position:absolute;top:0;width:100px;height:100px';
  var innerDiv = goog.dom.createElement('div');
  goog.style.setSize(innerDiv, '200px', '200px');
  outerDiv.appendChild(innerDiv);
  goog.dom.appendChild(goog.dom.getDocument().body, outerDiv);
  var width = outerDiv.offsetWidth - outerDiv.clientWidth;
  goog.dom.removeNode(outerDiv);
  return width;
};
2
dekdev

JQueryを使用して、次のように記述します。

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
Joshua Bambrick

これはより簡単な解決策だと思います：（body {width:100%;}）

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

CSS：

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

バニラJS：

// 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.warn(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

David Walshによるソリューション

0
max

これはスクロールバーの幅を取得するのに役立つと思います。

 textarea.scrollHeight

高さを与えるので、これは使用できません。

0
Sudhir Bastakoti

JQueryの場合：

var t = jQuery('<textarea/>').css({
    position: 'absolute', 
    top: '-100px',
    overflowX: 'hidden',
    overflowY: 'scroll'
}).prependTo('body'),
w = t[0].offsetWidth - t[0].clientWidth;
console.log('bar width = ', w);
t.remove();

バーの幅= 18

0
ekerner