div滾動條寬度

Question

有沒有一種簡單的方法來獲得使用JavaScript/jQuery的滾動條的寬度？ 我需要得到溢出的div的寬度+滾動條的寬度。

謝謝

Answer 1

，如果你使用jQuery，試試這個：

function getScrollbarWidth() 
{ 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'auto'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
} 

我使用這個項目我的工作，它就像一個魅力。它通過獲取滾動條寬度：

1. 追加一個div溢出內容的主體（在非可視區域，-200px頂部/左）
2. 集溢出hidden
3. 得到寬度
4. 集溢流到auto（以獲得滾動條）
5. 得到寬度
6. 兩者。減去寬度以得到滾動條的寬度

所以你要做的就是讓你的div（$('#mydiv').width()）的寬度並添加滾動條寬度什麼：

var completewidth = $('#mydiv').width() + getScrollbarWidth(); 

Answer 2

這是一個普通的JavaScript版本是這樣更快。

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

Answer 3

設置一個div的溢出「scroll」自動添加scrollbars（即使沒有什麼的裏面，scrollbars會在那裏，但灰色）。因此，只要一格，找到寬度，設置溢出滾動，並找到新的寬度，並返回的區別：

function getScrollBarWidth() { 
    var helper = document.createElement('div'); 
    helper.style = "width: 100px; height: 100px; overflow:hidden;" 
    document.body.appendChild(helper); 
    var bigger = helper.clientWidth; 
    helper.style.overflow = "scroll"; 
    var smaller = helper.clientWidth; 
    document.body.removeChild(helper); 
    return(bigger - smaller); 
} 

Answer 4

試試這個

$("#myDiv")[0].scrollWidth