Berechnen der Breite der Bildlaufleiste und Verwendung von Ergebnis in calc() css

Question

Ich möchte die Breite der Bildlaufleiste berechnen, so dass ich das Ergebnis in einer CSS calc() Deklaration verwenden.

Im Moment gehe ich davon aus, dass die Breite der Scrollbar immer 17px ist, wie folgt aus:

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

Das Problem dabei ist, wenn Sie einen anderen Browser Zoom%, wobei die Breite der Scrollbar Änderungen wählen . Deshalb möchte ich das Ergebnis der Berechnung verwenden, etwas in dieser Richtung zu tun:

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

EDIT: Ich habe jetzt das Problem mit Hilfe dieser question gelöst

Die JavaScript verwendet berechnen Sie die Scrollbar Breite (obwohl, ich habe festgestellt, benötigen Sie ein Intervall, um es zu die Aktualisierung erfolgt automatisch):

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

Mein Code (der zum Einbetten des Ergebnisses der Funktion in eine CSS-Deklaration calc() verwendet wird).

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

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

Answer 1

Warum brauchen Sie so viel Code, das zu tun?

Die einfache Art und Weise mit einfacher JavaScript ist:

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