How to reliably get screen width WITH the scrollbar

Question

Is there a way to reliably tell a browser\'s viewport width that includes the scrollbar, but not the rest of browser window)?

None of the properties listed here tell

Answer 1

I figured out how to accurately get the viewport width WITH the scrollbar using some code from: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

Put this inside your $(document).ready(function()

$(document).ready(function(){
    $(window).on("resize", function(){
      function viewport() {
          var e = window, a = 'inner';
          if (!('innerWidth' in window )) {
              a = 'client';
              e = document.documentElement || document.body;
          }
          return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
      }
    });
    // Get the correct window sizes with these declarations
    windowHeight = viewport().height;
    windowWidth = viewport().width;  
});

What it Does:

When your page is 'ready' or is resized, the function calculates the correct window height and width (including scrollbar).

Answer 2

This is my solution for removing the 'scrollbar shadow', because scrollWidth didn't work for me:

canvas.width  = element.offsetWidth;
canvas.height = element.offsetHeight;
canvas.width  = element.offsetWidth;
canvas.height = element.offsetHeight;

It's easy, but it works. Make sure to add a comment explaining why you assign the same value twice :)

Answer 3

Currently the new vw and vh css3 properties will show full size including scrollbar.

body { width:100vw; height:100vh; }

There is some discussion online if this is a bug or not.

Answer 4

I assume you want to know the viewport width with scrollbar included, because the screen it self does not have a scrollbar. In fact the Screen width and heigth will be the computer screen resolution itself, so I'm not sure what you mean with screen width with the scroll bar.

The viewport however, the area where only the page (and scroll bars) is presented to the user, meaning, no browser menus, no bookmarks or whatever, only the page rendered, is where such scroll bar may be present.

Assuming you want that, you can measure the client browser viewport size while taking into account the size of the scroll bars this way.

First don't forget to set you body tag to be 100% width and height just to make sure the measurement is accurate.

body { 
width: 100%; 
// if you wish to also measure the height don't forget to also set it to 100% just like this one.
}

Afterwards you can measure the width at will.

Sample

// First you forcibly request the scroll bars to be shown regardless if you they will be needed or not.
$('body').css('overflow', 'scroll');

// Viewport width with scroll bar.
var widthWithScrollBars = $(window).width();

// Now if you wish to know how many pixels the scroll bar actually has
// Set the overflow css property to forcibly hide the scroll bar.
$('body').css('overflow', 'hidden');

// Viewport width without scroll bar.
var widthNoScrollBars = $(window).width();

// Scroll bar size for this particular client browser
var scrollbarWidth = widthWithScrollBars - widthNoScrollBars;

// Set the overflow css property back to whatever value it had before running this code. (default is auto)
$('body').css('overflow', 'auto');

Hope it helps.

Answer 5

You can get the window width with scrollbar , that way:

function scrollbar_width() {
          if (jQuery('body').height() > jQuery(window).height()) {

              /* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */
              var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
              jQuery('body').append(calculation_content);
              var width_one = jQuery('div', calculation_content).innerWidth();
              calculation_content.css('overflow-y', 'scroll');
              var width_two = jQuery('div', calculation_content).innerWidth();
              jQuery(calculation_content).remove();
              return (width_one - width_two);
          }
          return 0;
      }

Answer 6

Check out vw: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

body {
   width: 100vw;
}

http://caniuse.com/#search=vw