div scrollbar width

Question

Có cách nào dễ dàng để có được chiều rộng của thanh cuộn bằng javascript/jquery không? Tôi cần phải có chiều rộng của div bị tràn + bất kỳ chiều rộng nào của thanh cuộn.

Cảm ơn bạn

Answer 1

nếu bạn đang sử dụng jquery, hãy thử này:

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

Tôi đang sử dụng này trong dự án tôi đang làm việc trên và nó hoạt động như một nét duyên dáng. nó được scrollbar-width bởi:

1. phụ thêm một div với tràn nội dung cho cơ thể (trong một khu vực không thể nhìn thấy, -200px đầu trang/trái)
2. bộ tràn đến hidden
3. nhận được chiều rộng
4. bộ tràn đến auto (để có được thanh cuộn)
5. có được chiều rộng
6. trừ đi cả hai chiều rộng để có được chiều rộng của thanh cuộn

vì vậy những gì bạn sẽ phải làm là nhận được độ rộng của div của bạn ($('#mydiv').width()) và thêm scrollbar-width:

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

Answer 2

Đây là một đồng bằng javascript phiên bản đó là cách nhanh hơn.

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

Thiết tràn của div để "scroll" tự động thêm scrollbars (ngay cả khi không có gì bên trong, các scrollbars sẽ có mặt ở đó, nhưng màu xám). Vì vậy, chỉ làm cho một div, tìm chiều rộng, thiết lập tràn để di chuyển và tìm chiều rộng mới, và trả lại sự khác biệt:

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

thử này

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