计算滚动条的宽度并在 calc() css 中使用结果答案

【问题标题】：Calculating width of scrollbar and using result in calc() css计算滚动条的宽度并在 calc() css 中使用结果
【发布时间】：2021-07-08 06:00:45
【问题描述】：

我想计算滚动条的宽度，以便在 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（不过，我发现您需要一个时间间隔才能使其自动更新）：

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

【问题讨论】：

那么我该如何为我的例子做这个工作？
你是把它用于一个特定的浏览器还是你想要它用于所有类型的浏览器？恐怕您将不得不使用一些 JavaScript。
对于各种，但我现在已经解决了这个问题。我会用我的解决方案更新问题。

标签： javascript css scroll width scrollbar

【解决方案1】：

实际上，你可以只用css和自定义属性（完全不用javascript）来获得滚动条的宽度：

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

然后你可以像这样在子元素中使用这个变量：

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

这是因为 100vw 始终是视图的内部宽度，但 body 的 100% 不包括滚动条。

【讨论】：

应该注意，这只有在你的 body 元素有滚动条时才有效。
另请注意，如果.container 与body 的宽度不同，这将不起作用，因为“100%”是相对于使用--scrollbar-width 变量的位置。

【解决方案2】：

扩展 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)); 
}

【讨论】：

【解决方案3】：

为什么需要这么多代码才能做到这一点？

使用纯 javascript 的简单方法是：

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

【讨论】：