How to Reliably Get Screen Width with the Scrollbar

How to reliably get screen width WITH the scrollbar

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.

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 

Get browser window width including scrollbar

This will get the full Window's width:

 window.outerWidth

NOTE: jQuery's outerWidth() doesn’t work on $(window)

How do I get the browser window's width, regardless of the body's scrollbar?

Please try this

I dont know whether this method is correct or no. But you will get actual width 677 of the sample window

$(document).ready(function(){
    $("body").css("overflow", "hidden");
    alert($(window).width());
    $("body").css("overflow", "auto");
});

DEMO

You will get the width of the window with the scroll bar as 677 when there is no overflow. Demo for screen width without scroll bar

You will get the width of the window with the scroll bar as 660 when there is overflow. Demo for scree width with scroll bar.

How can I get the browser's scrollbar sizes?

From Alexandre Gomes Blog I have not tried it. Let me know if it works for you.

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

Scrollbar widths can vary between browsers and operating systems, and unfortunately CSS does not provide a way to detect those widths: we need to use JavaScript.

Other people have solved this problem by measuring the width of the scrollbar on an element:

• http://davidwalsh.name/detect-scrollbar-width (original post)
• http://jsfiddle.net/a1m6an3u/ (live example)

We create a div .scrollbar-measure, add a scrollbar, and return its size.

// Create the div
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth);

// Delete the div
document.body.removeChild(scrollDiv);

This is fairly straightforward, but it is (obviously) not pure CSS.

Adjusting a div width taking a scrollbar into account

Another possibility uses only css, and it is very reliable.

On the top div, create a inner div to hold the content, and a hidden pseudo :after element to generate the scrollbar's width. I've used a display: table aligment to keep inline, but other techniques will do as well:

Works like a charm: http://jsfiddle.net/4gu5mkzy/1/

#top {
    width: 100%;
    height: 100px;
    display: table;
}

#top:after {
    display: table-cell;
    content: "";
    overflow-y: scroll;
    visibility: hidden;
}

.inner {
    display: table-cell;
    background: yellow;
}

<div id="top">
    <div class="inner"><!-- content --></div>
</div>

---

Related Topics