Heim > Web-Frontend > CSS-Tutorial > Warum weist meine Leinwand zusätzlichen Leerraum und übermäßiges Scrollen auf?

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

Mary-Kate Olsen
Freigeben: 2024-12-14 02:58:10
Original
446 Leute haben es durchsucht

Why Does My Canvas Have Extra White Space and Excessive Scrolling?

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);
Nach dem Login kopieren
.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;
}
Nach dem Login kopieren
<div class="screen">
  <canvas>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage