Warum weist meine Leinwand zusätzlichen Leerraum und übermäßiges Scrollen auf?

Problem beim Scrollen der Leinwand: Leerraum am unteren Rand und übermäßiges Scrollen

Beim Scrollen einer Leinwand innerhalb eines Divs können Benutzer auf zwei Probleme stoßen: Weiß Platz am unteren Rand der Leinwand und übermäßiges Scrollen, das den Hintergrund des darunter liegenden Divs sichtbar macht. Dies ist in erster Linie auf den standardmäßigen Inline-Element-Status der Leinwand zurückzuführen.

Lösung: Leinwand in Blockelement konvertieren

Um diese Probleme zu beheben, muss die Leinwand in ein Blockelement konvertiert werden Blockelement. Dies kann über CSS erfolgen, indem der Leinwand die Eigenschaft „display:block“ hinzugefügt wird.

Vertikale Ausrichtung

Alternativ, wenn die Leinwand in ein Blockelement konvertiert wird nicht geeignet, vertikale Ausrichtung kann verwendet werden. Fügen Sie „vertical-align: top“ zum CSS der Leinwand hinzu, um sicherzustellen, dass sie am oberen Rand des Div ausgerichtet ist und alle Leerräume am unteren Rand entfernt werden.

Überarbeiteter Code:

Der folgende überarbeitete Codeausschnitt enthält die vorgeschlagenen Lösungen:

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>

Indem Sie diese implementieren Bei Änderungen scrollt die Leinwand nun bis zum Ende ihres Inhalts, ohne den Hintergrund des zugrunde liegenden Divs anzuzeigen.

Das obige ist der detaillierte Inhalt vonWarum weist meine Leinwand zusätzlichen Leerraum und übermäßiges Scrollen auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!