Div コンテナ内の Canvas での空白とスクロールの問題を解決するにはどうすればよいですか?

Canvas 内の空白と過剰なスクロールの解決

div コンテナ内に Canvas 要素を埋め込む場合、特定のスタイルの問題が発生する可能性があります。よくある問題の 1 つは、キャンバスの下部に空白が存在し、過剰なスクロールが発生することです。

原因:
デフォルトでは、キャンバスはインライン要素としてレンダリングされます。これにより、ブロックレベルの div コンテナ内に配置すると、不要な空白や垂直方向の配置の問題が発生する可能性があります。

解決策:

1. Makeブロック要素のキャンバス:
   キャンバス要素の CSS を変更してブロックとして表示します。要素:

   canvas {
     display: block;
   }

2. 垂直方向の配置:
   または、CSS の垂直方向の配置を使用して、キャンバスをコンテナ:

   canvas {
     vertical-align: top;
   }

実装:

提供されたコードを次のように変更します:

.screen CSS:

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

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

このカスタマイズにより、キャンバスがブロック要素として動作するようになり、空白や過剰なスクロールの問題が排除されます。

以上がDiv コンテナ内の Canvas での空白とスクロールの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。