Detect Scrollbars dimensions

by Yunus Gaziev

HTML

<div id="stuffDScrolbars" class="d-scrollbars">
  width&nbsp;&nbsp;:&nbsp;<span class="scrollbar-width">0</span>px<br>height&nbsp;:&nbsp;<span class="scrollbar-height">0</span>px
</div>

CSS

body {
  padding: 40px;
  font-family: Consolas, sans-serif;
  font-size: 14px;
  line-height: 1.2;
}

p {
  margin: 15px 0;
}

.d-scrollbars {
  width: 240px;
	height: 100px;
	overflow: scroll;
  position: absolute;
	top: -9999px;
}

JavaScript

var getScrollbarsSize = function (selector) {

  var scrolledDiv = document.getElementById(selector);
  
  return {
  	width  : scrolledDiv.offsetWidth - scrolledDiv.clientWidth,
    height : scrolledDiv.offsetHeight - scrolledDiv.clientHeight
  }
}

var scrollBarsDimensions = getScrollbarsSize('stuffDScrolbars');

document.querySelector('.scrollbar-width').innerHTML = scrollBarsDimensions.width;
document.querySelector('.scrollbar-height').innerHTML = scrollBarsDimensions.height;