How can I get the browser's scrollbar sizes? How can I get the browser's scrollbar sizes? javascript javascript

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);};


Using jQuery, you can shorten Matthew Vines answer to:

function getScrollBarWidth () {    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),        widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();    $outer.remove();    return 100 - widthWithScroll;};


if you are looking for a simple operation, just mix plain dom js and jquery,

var swidth=(window.innerWidth-$(window).width());

returns the size of current page scrollbar. (if it is visible or else will return 0)