Pourquoi ma toile présente-t-elle un espace blanc supplémentaire et un défilement excessif ?

Problème de défilement du canevas : espace blanc en bas et défilement excessif

Lors du défilement d'un canevas dans un div, les utilisateurs peuvent rencontrer deux problèmes : blanc espace au bas du canevas et défilement excessif qui révèle l'arrière-plan du div sous-jacent. Cela est principalement dû au statut d'élément en ligne par défaut du canevas.

Solution : convertir le canevas en élément de bloc

Pour résoudre ces problèmes, le canevas doit être converti en un élément de bloc. Cela peut être fait via CSS en ajoutant la propriété "display: block" au canevas.

Alignement vertical

Alternativement, si la conversion du canevas en élément de bloc est ne convient pas, un alignement vertical peut être utilisé. Ajoutez "vertical-align: top" au CSS du canevas pour garantir qu'il est aligné en haut du div, en éliminant tout espace blanc en bas.

Code révisé :

L'extrait de code révisé suivant intègre les solutions suggérées :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);

.screen {
  background: red;
  height: 100px;
  width: 300px;
  overflow: auto;
  border-radius: 20px;
}
canvas {
 display:block; /* or vertical-align:top; */
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

<div class="screen">
  <canvas>

En implémentant Ces modifications, le canevas défilera désormais jusqu'à la fin de son contenu sans révéler l'arrière-plan du div sous-jacent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!