Расчет ширины полосы прокрутки и использование результата в calc() css

Question

Я хочу рассчитать ширину полосы прокрутки, чтобы использовать результат в объявлении CSS calc().

На данный момент, я полагаю, что ширина полосы прокрутки всегда 17px, как это:

body { 
    width:calc(100vw - 17px); 
} 
.container { 
    max-width:calc(100vw - 17px); 
} 

Проблема с этим при выборе другого браузера трансфокатора%, ширина изменяется ScrollBar , Поэтому я хочу, чтобы использовать результат вычисления, чтобы сделать что-то вдоль этих линий:

body { 
    width:calc(100vw - CALCULATED SCROLL-BAR WIDTH); 
} 
.container { 
    max-width:calc(100vw - CALCULATED SCROLL-BAR WIDTH); 
} 

EDIT: Я теперь решил проблему с помощью этого question

JavaScript, используемый для рассчитать ширину полосы прокрутки (хотя, я нашел вам требуется интервал, чтобы заставить его обновляться автоматически):

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; 
 
}

Мой код (который используется для встраивания результата функции в объявление CSS calc()).

$('body').css({ 
 
    'width':'calc(100vw - ' + getScrollbarWidth() + 'px)' 
 
}); 
 

 
$('.container').css({ 
 
    'max-width':'calc(100vw - ' + getScrollbarWidth() + 'px)' 
 
});

Answer 1

Почему нужно так много кода, чтобы сделать это?

легкий путь с равниной Javascript это:

$('body').css({ 
    'width':'calc(100vw - ' + (window.innerWidth - document.body.clientWidth) + 'px)' 
});