var div = document.createElement('div');
div.style.overflowY = 'scroll';
div.style.width =  '50px';
div.style.height = '50px';
div.style.visibility = 'hidden';
document.body.appendChild(div);
var scrollWidth = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
alert( scrollWidth );

var div = $("<div>").css({
    "overflowY": "scroll",
    "width": "50px",
    "height": "50px",
    "visibility": "hidden"
}).appendTo("body");
var scrollWidth = div.offsetWidth - div.width(); //NaN, т.к нет offsetWidth
div.remove();
alert(scrollWidth);

function scrollbarWidth() {
    var block = $('<div>').css({'height':'50px','width':'50px'}),
        indicator = $('<div>').css({'height':'200px'});

    $('body').append(block.append(indicator));
    var w1 = $('div', block).innerWidth();
    block.css('overflow-y', 'scroll');
    var w2 = $('div', block).innerWidth();
    $(block).remove();
    return (w1 - w2);
}

alert(scrollbarWidth());

function scrollbarWidth() {
  var documentWidth = parseInt(document.documentElement.clientWidth);
  var windowsWidth = parseInt(window.innerWidth);
  var scrollbarWidth = windowsWidth - documentWidth;
  return scrollbarWidth;
}

@media only screen and (max-width: 1024px)