我想要计算滚动条的宽度,以便在CSS calc()
声明中使用结果。
目前,我假设滚动条的宽度始终为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);
}
编辑:我现在借助这个问题已经解决了问题。
用于计算滚动条宽度的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)'
});