Get scrollbar width

by Florian Bar

HTML

<div>Scrollbar width: <span id="scrollBarWidth"></span></div>

CSS

.red { background: red; }
.blue { background: blue; }

JavaScript

function getScrollBarWidth() {
	$('body').prepend('<div class="scrollBarWidthOuter red" />');
    var $outer = $('.scrollBarWidthOuter');
    $outer.css({ 
        'position': 'absolute', 'top': '0', 'left': '0',
        'visibility': 'hidden', 'overflow': 'scroll',
        'width': '100%', 'height': '50px'
    });
    
    $outer.html('<div class="scrollBarWidthInner blue" />');
    var $inner = $('.scrollBarWidthInner');
    $inner.css({ 'width': '100%', 'height': '100px' });
    
    var outerWidth = $outer.outerWidth(true);
    var innerWidth = $inner.outerWidth(true);
    
    $outer.remove();
    
    return outerWidth - innerWidth;
}

$(function () {

	$('#scrollBarWidth').text(getScrollBarWidth() + 'px');

});