How to get screen width without (minus) scrollbar?
.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
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