是否可以在没有滚动条的情况下计算视口宽度(vw)？

Question

如标题中所述,是否可以vw仅在css中计算没有滚动条的情况？

例如,我的屏幕宽度为1920px.vw回来1920px,太好了.但我的实际身体宽度只是像1903px.

有没有办法让我1903px只用css 检索值(不仅是直接的孩子body),还是我绝对需要JavaScript呢？

Answer 1

一种方法是使用calc.据我所知,100%是包括滚动条的宽度.所以,如果你这样做:

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

你得到100vw减去滚动条的宽度.

如果你想要一个占视口50%的正方形(减去scollbar宽度的50%),你也可以用高度来做这个.

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}  

Answer 2

我通过在文档加载后添加一行 javascript 来定义 CSS 变量来做到这一点：

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

然后在 CSS 中，您可以使用var(--scrollbar-width)/不使用不同宽度的滚动条对不同的浏览器进行所需的任何调整。如果需要，您可以对水平滚动条执行类似的操作，将innerWidthwithinnerHeight和clientWidthwith替换clientHeight。

Answer 3

复制和粘贴解决方案

这是一个简单的嵌入式解决方案，基于 user11990065 的答案，用于设置 css 变量--scrollbar-width并在调整大小时保持更新。它还根据 DOMContentLoaded 和加载事件进行计算，这样您就不必担心初始渲染阶段的大小变化。

您只需将其复制并粘贴到您的代码中，因为它是普通 JS（或者将其包装在“脚本”标记中，然后将其直接粘贴到您的 HTML 代码中：

function _calculateScrollbarWidth() {
  document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
}
// recalculate on resize
window.addEventListener('resize', _calculateScrollbarWidth, false);
// recalculate on dom load
document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false); 
// recalculate on load (assets loaded as well)
window.addEventListener('load', _calculateScrollbarWidth);

如果页面中存在可能显示/隐藏滚动条的动态高度变化，您可能需要查看“检测文档高度变化”，您可以使用它来触发高度变化的重新计算。

由于该值是使用 JS 计算并设置为固定值，因此您可以在 CSS 的计算操作中使用它，如下所示：

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

这将为.full-width提供准确的可用宽度。

Answer 4

body { overflow: overlay; }

如果您不想让事情变得过于复杂，那么在某些情况下这可能就足够了。至少它很好地解决了我的问题，因为内容和视口边缘之间有足够的空白（Windows 滚动条会重叠最右边 20 左右的像素）。

Answer 5

根据规范，视口相对长度单位不考虑滚动条（实际上，假定它们不存在）。

因此，无论您的预期行为是什么，使用这些单元时都无法考虑滚动条。