禁用滚动条后仍出现空白间隙的前端问题求助

我制作了一个仿Google Docs的网站，在部分小屏幕比例下，本该显示滚动条的位置出现了空白间隙。已将body设置为100vw宽度、100vh高度，排除body尺寸问题，怀疑是隐形滚动条导致，但不知如何消除该间隙。

当前body的CSS代码：

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font);
  padding: 0;
  margin: 0;
  user-select: none;
  box-sizing: border-box;
}

注：我的网站并非Google Docs，只是一个仿制品。

问题根源 #

空白间隙确实和滚动条机制有关：100vw是视口的总宽度，包含浏览器垂直滚动条的预留空间；即便设置了overflow: hidden，部分浏览器仍会保留滚动条的宽度位置，最终导致空白出现。

解决方法 #

方法1：用width: 100%替换100vw

100%基于父容器的可用宽度（不包含滚动条预留空间），能规避视口宽度计算的偏差：

body {
  width: 100%; /* 替换100vw */
  height: 100vh;
  overflow: hidden;
  font-family: var(--font);
  padding: 0;
  margin: 0;
  user-select: none;
  box-sizing: border-box;
}

方法2：彻底隐藏滚动条并消除预留空间

针对不同浏览器内核，强制隐藏滚动条并移除其占用的空间：

/* WebKit内核浏览器（Chrome、Edge、Safari） */
body::-webkit-scrollbar {
  display: none;
}

/* Firefox */
body {
  scrollbar-width: none;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font);
  padding: 0;
  margin: 0;
  user-select: none;
  box-sizing: border-box;
}

方法3：使用overflow: clip替代overflow: hidden

overflow: clip是更严格的裁剪规则，不会为滚动条预留任何空间，兼容性良好：

body {
  width: 100vw;
  height: 100vh;
  overflow: clip; /* 替换overflow:hidden */
  font-family: var(--font);
  padding: 0;
  margin: 0;
  user-select: none;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Walker