Wie eliminiere ich Leerraum- und Scrollprobleme mit Canvas in einem Div-Container?

Auflösen von Leerräumen und übermäßigem Scrollen im Canvas

Beim Einbetten eines Canvas-Elements in einen Div-Container können bestimmte Stilprobleme auftreten. Ein häufiges Problem ist das Vorhandensein von Leerraum am unteren Rand der Leinwand und übermäßiges Scrollen.

Ursache:
Standardmäßig wird die Leinwand als Inline-Element gerendert. Dies kann zu unerwünschten Leerzeichen und Problemen mit der vertikalen Ausrichtung führen, wenn es in einem Div-Container auf Blockebene platziert wird.

Lösung:

1. Make Canvas ein Blockelement:
   Ändern Sie das CSS des Canvas-Elements, um es als Block anzuzeigen Element:

   canvas {
     display: block;
   }

2. Vertikale Ausrichtung:
   Alternativ können Sie die vertikale CSS-Ausrichtung verwenden, um die Leinwand korrekt innerhalb des zu positionieren Container:

   canvas {
     vertical-align: top;
   }

Implementierung:

Ändern Sie den bereitgestellten Code wie folgt:

.screen CSS :

.screen {
  background: red;
  height: 100px;
  width: 300px;
  overflow: auto;
  border-radius: 20px;
}
canvas {
  display: block;
}

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

Diese Anpassung stellt sicher, dass sich die Leinwand wie ein Blockelement verhält. Eliminierung von Leerzeichen und Problemen beim übermäßigen Scrollen.

Das obige ist der detaillierte Inhalt vonWie eliminiere ich Leerraum- und Scrollprobleme mit Canvas in einem Div-Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!