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

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

编辑：我现在借助这个问题已经解决了问题。

用于计算滚动条宽度的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)' 
});

- Bailey280899

---

那么，我该如何使它适用于我的示例？ - Bailey280899

你是只想要在特定的浏览器上使用它，还是希望适用于所有类型的浏览器？恐怕你需要使用一些 JavaScript。 - Jan Herzán

对于所有类型的问题，但我现在已经解决了这个问题。我会用我的解决方案更新这个问题。 - Bailey280899

Answer 1

实际上，你可以通过CSS和自定义属性（完全不需要JavaScript）获取滚动条的宽度：

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

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

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

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

- jonas_jonas

---

需要注意的是，这只有在你的body元素具有滚动条时才有效。 - JaredMcAteer

请注意，如果.container与body的宽度不同，这将无法正常工作，因为“100%”是相对于使用--scrollbar-width变量的位置而言的。 - Thomas Higginbotham

变量可能很有用，但不是必需的，因为可以使用 calc(100vw - (100vw - 100%)) 来计算值，正如几年前的 回答 所示。 - Tim R

Answer 2

扩展jonas_jonas的答案，如果.container必须与body具有相同的宽度，则可以起作用。

如果不是这种情况，即使如此，您也可以使用纯JS使其正常工作，定义一个CSS属性如下：

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

然后你可以在CSS中使用它

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

- Juan Barba

Answer 3

为什么需要这么多代码来完成这个任务？

使用纯JavaScript的简单方法是：

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

- NetVicious

Answer 4

使用新的容器查询和纯CSS，可以在任何滚动区域中进行组织：

    <div style="container-type: inline-size;">
        <div style="overflow-y: auto; height=300px;">
            <div style="padding-right: calc(40px - 100cqw + 100%)">
        </div>
    </div>

- Vlad Grynchyshyn