Find the width of scrollbars in a cross-browser manner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    var div = document.createElement('div');
    div.style.width = '50px';
    div.style.position = 'absolute';
    div.style.left = '-200px';
    div.style.overflow = 'hidden';
    var div2 = document.createElement('div');
    div2.style.position = 'relative';
    div2.style.width = '100%';
    div2.style.height = '100%';
    div.appendChild(div2);
    document.body.appendChild(div);
    if(div2.offsetWidth) {
        scrollBarWidth = div2.offsetWidth;
        div.style.overflow = 'scroll';
        scrollBarWidth -= div2.offsetWidth;
    } else if(window.getComputedStyle) {
        scrollBarWidth = parseInt(document.defaultView.getComputedStyle(div2, null).getPropertyValue('width'));
        div.style.overflow = 'scroll';
        scrollBarWidth -= parseInt(document.defaultView.getComputedStyle(div2, null).getPropertyValue('width'));
    }
    document.body.removeChild(div);
    alert(scrollBarWidth);