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 me the width of the screen INCLUDING the scrollbar (if present)

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

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 3

As long as body is 100%, document.body.scrollWidth will work.

Demo: http://jsfiddle.net/ThinkingStiff/5j3bY/

HTML:

<div id="widths"></div>

CSS:

body, html
{
margin: 0;
padding: 0;
width: 100%;
}

div
{
height: 1500px;
}

Script:

var widths = 'viewport width (body.scrollWidth): ' 
    + document.body.scrollWidth + '<br />'
    + 'window.innerWidth: ' + window.innerWidth + '<br />';

document.getElementById( 'widths' ).innerHTML = widths;

I put a tall div in the demo to force a scroll bar.

Answer 4

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 5

there is nothing after scrollbar so "rest of the window" is what?

But yes one way to do it is make another wrapper div in body where everything goes and body has overflow:none; height:100%; width:100%; on it, wrapper div also also has 100% width and height. and overflow to scroll. SO NOW...the width of wrapper would be the width of viewport

See Example: http://jsfiddle.net/techsin/8fvne9fz/

html,body {
    height: 100%;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
}

Answer 6

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 7

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

body {
   width: 100vw;
}

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

Answer 8

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 9

With jQuery you can calculate the browser's scrollbar width by getting the width difference when overflow: hidden is set and overflow: scroll is set. The difference in width will be the size of the scrollbar.

Here is a simple example that shows how you could do this.