Question

我想计算滚动条的宽度，以便在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); 
}

编辑：我已经在question

的帮助下解决了这个问题

用于计算滚动条宽度的JavaScript（但是，我发现您需要一段时间才能让它自动更新）：

＆＃13;

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

＆＃13;

我的代码（用于将函数的结果嵌入到CSS calc()声明中）。

＆＃13;

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

＆＃13;

Answer 1

为什么你需要这么多代码呢？

简单的javascript方式：

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

Answer 2

实际上，仅使用css和自定义属性即可获得滚动条宽度（并且完全不需要javascript）：

body {
    --scrollbar-width: calc(100vw - 100%);
}

然后您可以在子元素中使用此变量，如下所示：

.container { 
    max-width: calc(100vw - var(--scrollbar-width)); 
}

这是因为100vw始终是视图的内部宽度，但是主体的100％不包含滚动条。

Answer 3

扩展 jonas_jonas 的答案，它可以工作，但如果 .container 必须与正文具有相同的宽度。

如果不是这样，即使如此，您也可以使用 vanilla JS，定义这样的 CSS 属性

document.body.style.setProperty(
    "--scrollbar-width",
    `${window.innerWidth - document.body.clientWidth}px`
);

然后你可以在 CSS 中使用它

.container { 
    max-width: calc(100vw - var(--scrollbar-width)); 
}

计算滚动条的宽度并使用calc（）css中的结果

3 个答案: