画布底部有空白区域并且滚动太远

2022-01-17 00:00:00 html css html5-canvas

我正在使用这个答案 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.

我试过搞乱填充 &边距和不同的大小，但没有运气.

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 元素或使用 vertical-align:top.默认情况下，canvas 是一个内联元素，它的行为类似于 img；因此，由于垂直对齐，您将遇到空白问题(内部图像div 在图片下方有多余的空间)

Make the canvas a block element or use vertical-align:top. 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>

相关文章