Получение ширины полосы прокрутки с использованием JavaScript

Ответ 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;
}

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

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

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

Обновление

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

Обновление # 2 Это не будет работать в Mac OS с настройкой "Только показывать прокрутки при прокрутке" (Yosemite и вверх).

Ответ 2

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

 var scrollBarWidth = element.offsetWidth - element.clientWidth;

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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).

Ответ 7

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

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

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

Ответ 8

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

$.position.scrollbarWidth()

Ответ 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); 
}