キャンバスに余分な空白があり、過度にスクロールするのはなぜですか?

キャンバスのスクロールの問題: 下部の空白と過剰なスクロール

div 内でキャンバスをスクロールすると、ユーザーは次の 2 つの問題に遭遇する可能性があります。キャンバスの下部にあるスペースと、下にある div の背景を明らかにする過剰なスクロール。これは主に、キャンバスのデフォルトのインライン要素ステータスが原因です。

解決策: キャンバスをブロック要素に変換する

これらの問題を解決するには、キャンバスをブロック要素に変換する必要があります。ブロック要素。これは、プロパティ "display: block" をキャンバスに追加することで CSS を通じて実行できます。

Vertical Alignment

または、キャンバスをブロック要素に変換する場合は、適切ではありませんが、垂直方向の配置を使用できます。キャンバスの CSS に「vertical-align: top」を追加して、div の上部に配置され、下部の空白を削除します。

改訂コード:

次の改訂されたコード スニペットには、提案された内容が組み込まれています。解決策:

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>

これらの変更を実装すると、キャンバスは、基礎となる div の背景を表示せずにコンテンツの最後までスクロールするようになります。

以上がキャンバスに余分な空白があり、過度にスクロールするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。