为什么在 HTML Canvas 下方添加小 div 时会出现水平滚动条？答案

【问题标题】：Why does a horizontal scroll-bar appear when adding small div below HTML Canvas?为什么在 HTML Canvas 下方添加小 div 时会出现水平滚动条？
【发布时间】：2021-12-31 15:28:53
【问题描述】：

我有一个简单的 HTML canvas，它覆盖了整个页面，它本身可以很好地显示。

const canvas = document.getElementById("mainCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize",
  function() {
    canvas.width = innerWidth;
    canvas.height = innerHeight;  
  }
);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#mainCanvas {
  display: block;
  background-color: blue;
}

&lt;canvas id = "mainCanvas"&gt;&lt;/canvas&gt;

但是，当我尝试在其下方添加 div 元素时，即使所有元素都小于总宽度（因此不应该是任何水平溢出）。例如：

const canvas = document.getElementById("mainCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize",
  function() {
    canvas.width = innerWidth;
    canvas.height = innerHeight;  
  }
);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#mainCanvas {
  display: block;
  background-color: blue;
}

#info {
  width: 50px;
  height: 50px;
  background-color: green;
}

<canvas id = "mainCanvas"></canvas>
<div id = "info"></div>

我知道我可以通过使用overflow-x: hidden 来解决出现水平滚动条的问题，但我想了解它首先出现的原因。

【问题讨论】：

标签： html css canvas html5-canvas

【解决方案1】：

这与<canvas> 无关，其行为与任何其他块元素相同，例如<div>。

如果您将<body> 的维度中的唯一元素设置为innerWidth/innerHeight 并且父<body> 没有填充或边距，那么您已经用完了所有空间页面，不需要滚动条。

如果您在整页元素下方添加<div>，则需要垂直滚动条以允许用户向下移动视口以查看它。但是这个新的垂直滚动条现在占用了innerWidth 忽略的一些水平空间，就像docs state：

innerWidth 返回窗口的内部宽度（以像素为单位）。这包括垂直滚动条的宽度（如果存在）。

设置为精确的innerWidth 像素的原始元素现在水平溢出屏幕垂直滚动条的宽度。因此，水平滚动条就变得很有必要了。

您可以尝试的选项是document.documentElement.clientWidth。作为docs state：

clientWidth [...] 包括填充，但不包括边框、边距和垂直滚动条（如果存在）。

（您可能需要在运行 sn-p 后单击“整页”才能看到差异）：

const canvas = document.getElementById("main-canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
window.addEventListener("resize", // TODO debounce
  function () {
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;  
  }
);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#main-canvas {
  display: block;
  background-color: blue;
}

#info {
  width: 50px;
  height: 50px;
  background-color: green;
}

<canvas id="main-canvas"></canvas>
<div id="info"></div>

另见How to get the browser viewport dimensions?

【讨论】：