How can I get the browser's scrollbar sizes?

Question

How can I determine the height of a horizontal scrollbar, or the width of a vertical one, in JavaScript?

Answer 1

With jquery (only tested in firefox):

function getScrollBarHeight() {
    var jTest = $('


');
    $('body').append(jTest);
    var h = jTest.innerHeight();
    jTest.css({
        overflow: 'auto',
        width: '200px'
    });
    var h2 = jTest.innerHeight();
    return h - h2;
}

function getScrollBarWidth() {
    var jTest = $('
');
    $('body').append(jTest);
    var w = jTest.innerWidth();
    jTest.css({
        overflow: 'auto',
        height: '200px'
    });
    var w2 = jTest.innerWidth();
    return w - w2;
}

But I actually like @Steve's answer better.