Modernizr..scrollbarwidth

Test if you have scrollbar width

by laustdeleuran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div class="result">Testing your scrollbar width...</div>

CSS

/* Housecleaning */
body {
  padding:1em; 
  
  background:#ccc;
  
  font-family:Georgia, Times, Times New Roman, serif;
  font-size:4em;
  text-align:center;
}
/* Result */
.result {
  color:#999;
}
.result.is-success {
  color:#3a7c00;
}
.result.is-failure {
  color:#980838;
}

JavaScript

Modernizr.addTest('scrollbarwidth', function () {
  var rules, head, root, element, scrollbarWidth, style;
  
  
  rules = ['#modernizr-scrollbarwidth{ width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px; }'];
  head = document.getElementsByTagName('head')[0] || (function () {
    return document.documentElement.appendChild(document.createElement('head'));
  }());
  root = document.body || (function () {
    return document.documentElement.appendChild(document.createElement('body'));
  }());
  element = document.createElement('div'),
  style = document.createElement('style');
  
  style.type = "text/css";
  if (style.styleSheet) { 
    style.styleSheet.cssText = rules.join(''); 
  } else {
    style.appendChild(document.createTextNode(rules.join(''))); 
  }
  head.appendChild(style);
  
  element.id = "modernizr-scrollbarwidth";
  root.appendChild(element);
  scrollbarWidth = element.offsetWidth - element.clientWidth; // http://davidwalsh.name/detect-scrollbar-width
    
  head.removeChild(style);
  root.removeChild(element);
  
  return scrollbarWidth > 0;
});

if (Modernizr.scrollbarwidth) {
  $('.result').text('Your scrollbar has a width!').addClass('is-success');
} else {
  $('.result').text('You have no scrollbar width!').addClass('is-failure');
}