画布底部有空白并且滚动太远 [英] Canvas has white space at the bottom and scrolls too far

问题描述

我正在使用此答案 https://stackoverflow.com/a/36233727/1350146 滚动画布在一个div.我也隐藏了滚动条.问题在于它似乎滚动得太远，在这种情况下，如果向下滚动，您会看到画布所在的div的红色.

I'm using this answer https://stackoverflow.com/a/36233727/1350146 to scroll a canvas in a div. I'm also hiding the scrollbar. The problem is it appears to scroll too far, in this case if you scroll down you can see the red of the div the canvas is in.

我尝试弄乱填充&am​​p;边距和大小不一，但没有运气.

I've tried messing with padding & margins and different sizes but no luck.

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;
  
}

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

<div class="screen">
  <canvas id="myCanvas" width="300" height="120">
  </canvas>
</div>

如何使其仅滚动到画布的末尾而不显示任何容器div?

How can I make it scroll just to the end of the canvas and not show any of the container div underneath?

谢谢！

推荐答案

为画布添加block元素.默认情况下，canvas是一个内联元素，其行为与img类似；因此，由于垂直对齐(图像内部div在图片下方有多余的空间)

Make the canvas a block element. By default, canvas is an inline element and it will behave similary to an img; thus you will have the whitespace issue due to vertical alignement (Image inside div has extra space below the image)

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;
}

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

<div class="screen">
  <canvas id="myCanvas" width="300" height="120">
  </canvas>
</div>

这篇关于画布底部有空白并且滚动太远的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！