如何計算滾動條的寬度？

鑑於<textarea>與固定的width，我想它的「活動寬度」是恆定的（在px）。「有效寬度」是指文本出現的區域。如何計算滾動條的寬度？

當垂直滾動條沒有出現時，「活動寬度」等於width。但是，當垂直滾動條出現時，「活動寬度」變得小於width（我猜測滾動條的寬度更小）。

我想確定是否顯示垂直滾動條，如果是，則按滾動條的寬度增加<textarea>的寬度。我如何識別滾動條的寬度？

有沒有更好的方法？

（我感興趣的是Firefox，如果它使生活更輕鬆。）

來源

2011-11-10 Misha Moroshko

可能重複http://stackoverflow.com/questions/986937/how-can-i-get-the -browsers-scrollbar-sizes） –

有一個jQuery插件，可以幫助這一點：https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

此外，從http://www.alexandre-gomes.com/?p=115 下面是一些代碼，可能會有幫助。

這產生在100％的寬度與滾動條一個<div>內部隱藏<p>元件，然後計算<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); 
};

來源

2011-11-10 12:42:45

我收到錯誤「無法準備好財產'appendChild'null」 –

也許你可以把

overflow-y:scroll;

在你的CSS。這會強制滾動條出現，即使文本區域爲空，因此寬度始終保持不變。

來源

2011-11-10 12:09:57 Oliver

有趣的想法... –

我認爲這有助於獲得滾動條的寬度。

 
textarea.scrollHeight

給人所以這種傾斜可以使用高度..

來源

2011-11-10 12:14:24

你測試了這個嗎？當滾動條沒有出現時，它仍然返回一個非零值。 –

滾動條寬度是簡單的（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; 
};

來源

2013-05-27 10:51:14 Semra

我一直在尋找類似的東西 - 這是我發現的

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

或者

使用谷歌關閉圖書館 - 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; 
};

來源

2014-01-10 14:35:55 dekdev

谷歌關閉庫解決方案的效果最好，thx！ slickgrid解決方案被破壞請參閱https://github.com/6pac/SlickGrid/pull/149 – kofifus

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

來源

2014-08-22 11:22:52

返回「NaN」 - Chrome 54 –

確定嗎？由於Chrome的新滾動條不佔用空間，因此它對我而言似乎會返回0 –

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

Solution by David Walsh

來源

2017-01-24 17:56:51 makshh

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

的[我怎樣才能在瀏覽器的滾動條的大小？（

來源

2017-08-12 23:30:33 ekerner

如何計算滾動條的寬度？

回答

相關問題