キャンバス スクロールの下部に余分な空白が表示されるのはなぜですか?

下部に空白がある場合のキャンバスのスクロールの問題

div 内に配置されたキャンバスをスクロールすると、キャンバスがスクロールする問題が発生する場合があります実際のコンテンツを超えて、コンテナの div が明らかになります。 background.

解決策:

これを防ぐには、キャンバスをブロック要素として設定するか、div 内の垂直方向の配置を上部に設定する必要があります。デフォルトでは、canvas は画像と同様のインライン要素です。このインライン動作により、垂直方向のスペースの問題が発生する可能性があります。

修正を加えたコード スニペット:

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

canvas {
    display: block;
}

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

このコード変更により、キャンバスがブロック要素として動作するよう強制され、ブロック要素として動作するようになります。下部に空白があり、コンテンツの最後まで適切にスクロールできるようになります。

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