How to get screen width without (minus) scrollbar?

Question

I have an element and need it's width without(!) vertical scrollbar.

Firebug tells me body width is 1280px.

Either of these work fine in Firefox:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

They all return 1263px, which is the value I'm looking for.

However all other browser give me 1280px.

Is there a cross browser way to get a fullscreen width without(!) vertical scrollbar?

Solution 1

.prop("clientWidth") and .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

in JavaScript:

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{P.S: Note that to use scrollWidth reliably your element should not overflow horizontally}

jsBin demo

---

You could also use .innerWidth() but this will work only on the body element

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

Solution 2

You can use vanilla javascript by simply writing:

var width = el.clientWidth;

You could also use this to get the width of the document as follows:

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

Source: MDN

You can also get the width of the full window, including the scrollbar, as follows:

var fullWidth = window.innerWidth;

However this is not supported by all browsers, so as a fallback, you may want to use docWidth as above, and add on the scrollbar width.

Source: MDN

Solution 3

Here are some examples which assume $element is a jQuery element:

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

Solution 4

Try this :

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

You can get the screen width by with and without scroll bar by using this code. Here, I have changed the overflow value of body and get the width with and without scrollbar.

Solution 5

The safest place to get the correct width and height without the scrollbars is from the HTML element. Try this:

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

Browser support is pretty decent, with IE 9 and up supporting this. For OLD IE, use one of the many fallbacks mentioned here.

View more solutions

Comments

[Konstantin Pereiaslov]

This won't work if for some reason you changed the width of body element.

[Konstantin Pereiaslov]

@RokoC.Buljan I changed it in CSS as a part of the design, so I don't think that would be easy. Just letting everyone else, who may get the wrong results because of it know.

[Sammaye]

It seems this doesn't truly work on Chrome any more, the reported width is actually 20px bigger than the window itself, I have tried numerous width measurements so far nothing.

[Roko C. Buljan]

@Sammaye Sorry to hear that, works in Chrome for me.

[Sammaye]

I thought it may have been version of chrome but I just updated and it still happens. The way I am testing is I have a media query at 768 and a innerWidth measurement at 768, the JS breaks at about 786 according to Chromes little size hover over on its pages. It might be implementation differences between JS width and media query width

[Roko C. Buljan]

@Sammaye ... It's hard to visualize without a demo... Can you setup a simple test case on jsBin?

[Sammaye]

Had it wrong way round, JS is smaller than media query when reporting but here is an example: jsbin.com/homixuqi/1 , if you resize it to 780 it will show 764 in JS

[Roko C. Buljan]

@Sammaye that's cause you forgot (why?) to set margin:0; to BODY or use a common CSS reset code. jsbin.com/homixuqi/2/edit . So again, the code works perfectly fine.

[Sammaye]

Ok fair enough, I thought bootstrap 3.1 had reset code but it appears not

[Jan]

This does not take into account if there is a scrollbar

[The Merovingian]

note that this method includes the vertical scrollbar width in the calculated width, if there is one (tested in Chrome).

[Naman Goel]

This kind of works, but not for height if you needed that. Also, this is not super reliable as the size of the body can be messed with using CSS.

[Roko C. Buljan]

@NamanGoel it's your job as web designer to prevent messarounds with the body width. It's not a difficult task. Also, regarding the height it kind of depends if your body overflows or not. if it overflows than constrain it.

[Naman Goel]

@RokoC.Buljan I'm not disagreeing with you here. Of course no good web designer/developer to should mess with the body width and stuff. My point was about using the most reliable API available. Some javascript developers may be building plug-ins etc and may not have control of the entire page.

[Sebastian Simon]

document.documentElement.clientWidth helped me the most, because it works for height as well (innerHeight can be smaller if the body doesn’t fill the page, etc.) and gets the value without the scrollbar.

[Roko C. Buljan]

@Fabián the jsBin demo works pretty good (Windows Ch. 66.0.3359)

[Codemonkey]

document.documentElement.clientWidth is the real winner. document.body.clientWidth is ok unless you have a min-width set on your body element and the browser is currently smaller than that minimum width.