0

According to CSS-side logic of the browser, the total width of the document includes the vertical scrollbar size, whereas javascript doesn't (no matter if I use width, innerWidth or even outerWidth functions, they return the same number):

jQuery(window).resize(function(){
    var button = jQuery('.compactmenu-button');
    if(jQuery(document).innerWidth() >= 680){
        if (!button.is(':visible')){
            jQuery('nav').css('display', 'block');
            console.log('more than 680');
        }
    }
    else{
        jQuery('nav').css('display', 'none');
            console.log('less than 680');
    }
});

JSFiddle

Obviously you can pick manually the width of the scrollbar, but it varies depending on the browser you're using.

Is there a way to get the width including the scrollbar?

Fabián
  • 565
  • 1
  • 7
  • 30
  • I don't know what browser you are supporting, but Javascript can use media queries : https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia – Karl-André Gagnon Jul 30 '14 at 20:39
  • Also, might help you : http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto – Karl-André Gagnon Jul 30 '14 at 20:40

0 Answers0