Cách tính chiều rộng của thanh cuộn?

Question

Cho một <textarea> với số cố định width, tôi muốn "chiều rộng hoạt động" cố định của nó là không đổi (trong px). Bởi "chiều rộng hoạt động", tôi có nghĩa là khu vực nơi văn bản xuất hiện.

Khi thanh cuộn dọc không xuất hiện, "chiều rộng hoạt động" bằng width. Tuy nhiên, khi thanh cuộn dọc xuất hiện, "chiều rộng hoạt động" sẽ nhỏ hơn width (tôi đoán chính xác hơn bằng chiều rộng của thanh cuộn).

Tôi nghĩ để xác định xem thanh cuộn dọc có xuất hiện hay không và nếu có, để tăng chiều rộng của <textarea> theo chiều rộng của thanh cuộn. Làm thế nào tôi có thể xác định chiều rộng của thanh cuộn?

Có cách tiếp cận nào tốt hơn không?

(Tôi quan tâm đến Firefox, nếu nó làm cho cuộc sống dễ dàng hơn.)

Answer 1

Có một plugin jQuery có thể giúp với điều này: https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

Ngoài ra, từ http://www.alexandre-gomes.com/?p=115 Dưới đây là một số mã có thể giúp.

Điều này tạo thành phần ẩn <p> ở độ rộng 100% bên trong <div> bằng thanh cuộn, sau đó tính toán chiều rộng <div> - chiều rộng thanh rộng <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

Có lẽ bạn có thể đặt

overflow-y:scroll; 

trong css của bạn. Điều này buộc thanh cuộn phải có mặt ngay cả khi vùng văn bản trống, vì vậy chiều rộng luôn luôn không đổi.

Answer 3

Tôi nghĩ điều này sẽ giúp bạn có được chiều rộng của thanh cuộn.

 
textarea.scrollHeight 

cho chiều cao nên không thể này được sử dụng ..

Answer 4

Chiều rộng thanh cuộn chỉ đơn giản là (offsetWidth - clientWidth) trong không biên giới! thành phần. Chức năng này tính toán nó khi đang di chuyển và lưu trữ kết quả để sử dụng tiếp. Không cần phải cho tỷ lệ phần trăm chiều rộng vv.

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 5

tôi đang tìm kiếm một cái gì đó tương tự - đây là những gì tôi tìm thấy

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

Nguồn: Slickgrid sử dụng này - https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L378

Hoặc

Sử dụng thư viện đóng cửa Google - 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; 
}; 

Answer 6

Sử dụng jQuery, bạn chỉ cần viết:

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 7

CSS:

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

Vanilla 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

Answer 8

Với 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(); 

thanh width = 18