如何获得浏览器滚动条的宽度并将其添加到使用JQuery的窗口宽度？

我试图找出浏览器的滚动条的宽度（例如Edge，Firefox，Opera，Chrome等），用户可能会使用它（如果滚动条存在）并将其添加到宽度的窗口，以便我的JQuery代码与我的CSS代码保持一致，当浏览器被调整大小时，我可以计算出窗口的宽度，但不是滚动条的宽度。如何获得浏览器滚动条的宽度并将其添加到使用JQuery的窗口宽度？

JQuery的

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

来源

2015-12-22 linkNES

http://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript –

我想通了，似乎对工作的一种方式如果任何人有更好的解决方案或可以改善此代码，请让我知道。

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

来源

2015-12-23 01:41:27 linkNES

您可以使用此函数来得到它：

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

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

来源

2015-12-22 23:42:52

如何获得浏览器滚动条的宽度并将其添加到使用JQuery的窗口宽度？

回答

相关问题