Получение ширины полосы прокрутки с помощью JavaScript

Question

Следующий HTML-код отобразит полосу прокрутки с правой стороны края div.container.

Можно ли определить ширину этой полосы прокрутки?

<div class="container" style="overflow-y:auto; height:40px;">
  <div class="somethingBig"></div>
</div>

Answer 1

Эта функция должна дать вам ширину полосы прокрутки

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

Основные шаги здесь:

1. Создайте скрытый div (внешний) с шириной, установленной в "100px" и получите ширину смещения (должно быть 100)
2. Принудительно отображать полосы прокрутки в div (external), используя свойство переполнения CSS
3. Создайте новый div (внутренний) и добавьте к внешнему, установите его ширину в "100%" и получите ширину смещения
4. Рассчитать ширину полосы прокрутки на основе собранных смещений

Рабочий пример здесь: http://jsfiddle.net/UU9kg/17/

Обновить

Если вы используете это в приложении Windows (metro), убедитесь, что для свойства -ms-overflow-стиля внешнего элемента div установлено значение scrollbarиначе ширина не будет правильно определена. (код обновлен)

Обновление № 2 Это не будет работать в Mac OS с настройкой по умолчанию "Показывать только полосы прокрутки при прокрутке" (Yosemite и выше).

Answer 2

// offsetWidth включает ширину полосы прокрутки, а clientWidth - нет. Как правило, он равен 14-18px. так:

 var scrollBarWidth = element.offsetWidth - element.clientWidth;

Answer 3

Я думаю, что это будет просто и быстро -

var scrollWidth= window.innerWidth-$(document).width()

Answer 4

Если дочерний элемент занимает всю ширину контейнера, исключая полосу прокрутки (по умолчанию), вы можете вычесть ширину:

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;

Answer 5

Если вы используете jquery.ui, попробуйте этот код:

$.position.scrollbarWidth()

Answer 6

Предполагая, что контейнер находится на странице только один раз, и вы используете jQuery, тогда:

var containerEl = $('.container')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;

Также смотрите этот ответ для более подробной информации.

Answer 7

Вот простой способ использования jQuery.

var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();

По сути, мы вычитаем ширину прокрутки из общей ширины, и это должно обеспечить ширину полосы прокрутки. Конечно, вы захотите кэшировать выбор jQuery('div.withScrollBar'), чтобы не выполнять эту часть дважды.

Answer 8

Я использовал следующую функцию, чтобы получить высоту / ширину полосы прокрутки:

function getBrowserScrollSize(){

    var css = {
        "border":  "none",
        "height":  "200px",
        "margin":  "0",
        "padding": "0",
        "width":   "200px"
    };

    var inner = $("<div>").css($.extend({}, css));
    var outer = $("<div>").css($.extend({
        "left":       "-1000px",
        "overflow":   "scroll",
        "position":   "absolute",
        "top":        "-1000px"
    }, css)).append(inner).appendTo("body")
    .scrollLeft(1000)
    .scrollTop(1000);

    var scrollSize = {
        "height": (outer.offset().top - inner.offset().top) || 0,
        "width": (outer.offset().left - inner.offset().left) || 0
    };

    outer.remove();
    return scrollSize;
}

Это решение на основе jQuery работает в IE7+ и во всех других современных браузерах (включая мобильные устройства, где высота / ширина полосы прокрутки будет равна 0).

Answer 9

это сработало для меня..

 function getScrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}