2

Без использования jQuery это будет выглядеть так.

var div = document.createElement('div');
div.style.overflowY = 'scroll';
div.style.width =  '50px';
div.style.height = '50px';
div.style.visibility = 'hidden';
document.body.appendChild(div);
var scrollWidth = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
alert( scrollWidth );

С jQuery не знаю:

var div = $("<div>").css({
    "overflowY": "scroll",
    "width": "50px",
    "height": "50px",
    "visibility": "hidden"
}).appendTo("body");
var scrollWidth = div.offsetWidth - div.width(); //NaN, т.к нет offsetWidth 
div.remove();
alert(scrollWidth);
1

4 ответа 4

3

Посмотреть пример

function scrollbarWidth() {
    var block = $('<div>').css({'height':'50px','width':'50px'}),
        indicator = $('<div>').css({'height':'200px'});

    $('body').append(block.append(indicator));
    var w1 = $('div', block).innerWidth();    
    block.css('overflow-y', 'scroll');
    var w2 = $('div', block).innerWidth();
    $(block).remove();
    return (w1 - w2);
}

alert(scrollbarWidth());
3

Можно проще поступить - из ширины окна вычитаем ширину контента:

function scrollbarWidth() {
  var documentWidth = parseInt(document.documentElement.clientWidth);
  var windowsWidth = parseInt(window.innerWidth);
  var scrollbarWidth = windowsWidth - documentWidth;
  return scrollbarWidth;
}

Это полезно использовать при сочетании css и js для формирования документа. Стили используют ширину окна, если используется медиа запрос

@media only screen and (max-width: 1024px)

И для соответствия точек перехода надо это учитывать.

0

Для выяснения, например, вертикального скроллинга нужно сравнить offsetWidth с clientWidth - с добавлением (sic!) borderLeftWidth и borderRightWidth.

Пояснения см. здесь

0

const width = document.documentElement; const mainWidth = width.clientWidth; const windowWidth = window.innerWidth; console.log(windowWidth - mainWidth);

1
  • 2
    добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 9 фев 2023 в 12:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.