計算滾動條的寬度和使用calc（）的結果css

我想計算滾動條的寬度，以便在CSS calc()聲明中使用結果。計算滾動條的寬度和使用calc（）的結果css

此刻，我認爲對滾動條的寬度是始終17px，像這樣：

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

與此問題是，當你選擇不同的瀏覽器縮放％的滾動條的寬度將更改。所以我想用計算的結果做沿着這些路線的東西：

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

編輯：現在我已經用這個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)' 
 
});

來源

2016-09-08 Bailey280899

那麼我將如何做這項工作對我的例子嗎？ – Bailey280899

您是否將它用於某個特定的瀏覽器，或者您希望它適用於所有類型的瀏覽器？我擔心你將不得不使用一些JavaScript。 –

對於各種類型，但我現在已經解決了這個問題。我會用我的解決方案更新這個問題。 – Bailey280899

爲什麼需要這麼多的代碼來做到這一點？

用普通的簡單的方法的JavaScript是：

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

來源

2017-04-04 12:00:40 NetVicious

計算滾動條的寬度和使用calc（）的結果css

回答

相關問題