Получаем ширину скролла в браузере используя JavaScript.

Вечно создаю какие то непонятные вещи. Вот сегодня мне понадобилось определять ширину скроллбара в браузере. Причем не буду же я вручную их определять и задавать каким то массивом чтобы потом это срабатывало. Это не наш путь. Нужно чтобы динамически определялась эта ширина и выполнялись соответствующие действия.

Мне например нужен был этот функционал чтобы работал мой плагин к jQuery (который совершает хитрые манипуляции со скролами) как было задумано. Сам плагин расшарю немножко попозже, когда убежусь что он работает как надо и посчитаю что уже можно выложить :). Возможно кому то тоже такое пригодится. 

Код функции выглядит вот так:

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = '100%';
    inner.style.height = '200px';

    var outer = document.createElement('div');
    outer.style.position = 'absolute';
    outer.style.top = '0px';
    outer.style.left = '0px';
    outer.style.visibility = 'hidden';
    outer.style.width = '200px';
    outer.style.height = '150px';
    outer.style.overflow = 'hidden';
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2)
        w2 = outer.clientWidth;
    document.body.removeChild (outer);

    return (w1 - w2);
};

Пример можно посмотреть здесь и оценить размер своего .... кхмм... скролла. У кого какие размеры? :) у меня 15.

Stay tuned for more....