如何计算桌面式滚动条是否显示（递归问题）

给定容器样式：

.container {
  width: 100px;
  height: 100px;
  overflow: auto;
}

原本预期是当内容宽度或高度超过100px时，才会出现对应方向的滚动条，但实际情况并非如此：如果内容宽度设为101px，水平滚动条会出现，而它会占用容器的可用高度，进而触发垂直滚动条。注意：此问题仅针对桌面端占用空间的滚动条，而非触摸设备上的叠加式滚动条。

示例代码 #

CSS #

.container {
  width: 100px;
  height: 100px;
  overflow: auto;
  margin-bottom: 1em;
}

.content1 {
  width: 100px;
  height: 100px;
  background: green;
}

.content2 {
  width: 101px;
  height: 100px;
  background: green;
}

HTML #

<div class="container">
  <div class="content1"></div>
</div>

<div class="container">
  <div class="content2"></div>
</div>

使用桌面端滚动条时，会看到仅内容宽度超出容器，却同时出现水平和垂直两个滚动条的现象。现在需要在不查询DOM的前提下，通过代码判断滚动条是否会显示，这是一个递归依赖的问题——垂直滚动条的存在会挤压水平方向的可用空间，反之亦然。

下面是一段错误的判断代码，因为垂直滚动条的判断结果会影响水平滚动条的判断，而水平滚动条的存在又会反过来影响垂直方向的可用高度：

const viewportWidth = 100
const viewportHeight = 100

const contentWidth = 101 // 超出容器宽度
const contentHeight = 100

const scrollbarSize = 16

// 错误逻辑：这里应该在hasHScroll为true时减去scrollbarSize
// 但hasHScroll的判断又依赖hasVScroll的结果
const hasVScroll = contentHeight > viewportHeight

const hasHScroll = contentWidth - (hasVScroll ? scrollbarSize : 0)

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