Proč vodorovný posuvník se zobrazí při přidávání malý div níže HTML Canvas?

Question 1

Mám jednoduchý HTML canvas která pokrývá celou stránku, která se zobrazuje v pořádku sama o sobě.

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

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

Nicméně, když se pokusím přidat div prvek pod ním, okamžitě vodorovný posuvník se zobrazí, i když všechny prvky jsou menší než celková šířka (a tedy tam by neměl být žádný horizontální přetečení). Například:

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>

Vím, že můžete opravit problém vodorovný posuvník zobrazující se pomocí overflow-x: hidden ale chci pochopit, proč se to objeví na prvním místě.

Question 2

Nesouvisí to se <canvas> a chování je stejné s jinými blok prvek, jako je například <div>.

Pokud nastavíte osamělý prvek v <body>s rozměry innerWidth/innerHeight a rodiče <body> nemá žádný padding nebo margin, pak jste použili přesně všechna místa na stránce a žádné posuvníky jsou nezbytné.

Pokud přidáte <div> pod celou stránku prvek, svislý posuvník bude nutné povolit uživateli přesunout pohled dolů vidět. Ale tento nový vertikální posuvník nyní zabírá některé horizontální prostor, který je ignorován innerWidth, jako docs státu:

innerWidth vrátí vnitřní šířku okna v pixelech. To zahrnuje šířku svislého posuvníku, pokud existuje.

Původní prvek nastavit přesně innerWidth pixelů teď přetéká obrazovku vodorovně o šířku svislého posuvníku. Proto, vodorovný posuvník se stává nezbytné.

Možnost, kterou můžete vyzkoušet, je document.documentElement.clientWidth. Jako docs státu:

clientWidth [...] zahrnuje výplň, ale vylučuje hranice, okraje, a vertikální posuvníky (pokud je přítomen).

(možná budete muset kliknout na 'full page' po spuštění úryvku vidět rozdíl):

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>

Viz také , Jak se dostat prohlížeče výřez rozměry?

ggorlen · Answer 1 · 2021-12-02T20:39:49

Nesouvisí to se <canvas> a chování je stejné s jinými blok prvek, jako je například <div>.

Pokud nastavíte osamělý prvek v <body>s rozměry innerWidth/innerHeight a rodiče <body> nemá žádný padding nebo margin, pak jste použili přesně všechna místa na stránce a žádné posuvníky jsou nezbytné.

Pokud přidáte <div> pod celou stránku prvek, svislý posuvník bude nutné povolit uživateli přesunout pohled dolů vidět. Ale tento nový vertikální posuvník nyní zabírá některé horizontální prostor, který je ignorován innerWidth, jako docs státu:

innerWidth vrátí vnitřní šířku okna v pixelech. To zahrnuje šířku svislého posuvníku, pokud existuje.

Původní prvek nastavit přesně innerWidth pixelů teď přetéká obrazovku vodorovně o šířku svislého posuvníku. Proto, vodorovný posuvník se stává nezbytné.

Možnost, kterou můžete vyzkoušet, je document.documentElement.clientWidth. Jako docs státu:

clientWidth [...] zahrnuje výplň, ale vylučuje hranice, okraje, a vertikální posuvníky (pokud je přítomen).

(možná budete muset kliknout na 'full page' po spuštění úryvku vidět rozdíl):

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>

Viz také , Jak se dostat prohlížeče výřez rozměry?

Proč vodorovný posuvník se zobrazí při přidávání malý div níže HTML Canvas?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii