This function should give you width of scrollbar

function getScrollbarWidth() {



  // Creating invisible container

  const outer = document.createElement('div');

  outer.style.visibility = 'hidden';

  outer.style.overflow = 'scroll'; // forcing scrollbar to appear

  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps

  document.body.appendChild(outer);



  // Creating inner element and placing it in the container

  const inner = document.createElement('div');

  outer.appendChild(inner);



  // Calculating difference between container's full width and the child width

  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);



  // Removing temporary elements from the DOM

  outer.parentNode.removeChild(outer);



  return scrollbarWidth;



}

Basic steps here are:

1. Create hidden div (outer) and get it's offset width


2. Force scroll bars to appear in div (outer) using CSS overflow property


3. Create new div (inner) and append to outer, set its width to '100%' and get offset width


4. Calculate scrollbar width based on gathered offsets

Working example here: http://jsfiddle.net/slavafomin/tsrmgcu9/

Update

If you're using this on a Windows (metro) App, make sure you set the -ms-overflow-style property of the 'outer' div to scrollbar, otherwise the width will not be correctly detected. (code updated)

Update #2
This will not work on Mac OS with the default Only show scrollbars when scrolling setting (Yosemite and up).