如何獲得瀏覽器滾動條的寬度並將其添加到使用JQuery的窗口寬度？

Question

我試圖找出瀏覽器的滾動條的寬度（例如Edge，Firefox，Opera，Chrome等），用戶可能會使用它（如果滾動條存在）並將其添加到寬度的窗口，以便我的JQuery代碼與我的CSS代碼保持一致，當瀏覽器被調整大小時，我可以計算出窗口的寬度，但不是滾動條的寬度。

JQuery的

$(window).on('resize',function(){ 
    if($(this).width() > 680){ 
     //add remove css styles 
    } 
}); 

Answer 1

我想通了，似乎對工作的一種方式如果任何人有更好的解決方案或可以改善此代碼，請讓我知道。

$(window).on('resize',function(){ 
    //get accurate width of the screen by removing scrollbars 
    $('html, body').css('overflow', 'hidden'); 
    var w = $(window).width(); 

    //add back the scrollbars 
    $('html, body').css('overflow', 'visible'); 
    if(w > 680){ 
     //add more code here what you need done when screen reaches desired size 
    } 
}); 

Answer 2

您可以使用此函數來得到它：

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

我希望它可以幫助你......