画布滚动太多 [英] canvas scrolls too far

问题描述

我正在使用 https://stackoverflow.com/a/36233727/1350146 滚动画布在一个div中。我也隐藏了滚动条。问题是它看起来太滚动了，在这种情况下，如果你向下滚动，你可以看到画布所在的div的红色。

我尝试了messing用填充&am​​p;页边距和大小不同，但没有运气。 data-babel =false>

  var c = document.getElementById（ myCanvas）; var ctx = c.getContext（2d）; ctx.fillStyle ='＃00aa00'ctx.fillRect（0，0，c.width，c.height）; ctx.fillStyle ='#fff'  
  .screen {background：red; height：100px;宽度：300px;溢出：自动; border-radius：20px; } ::  -  webkit-scrollbar {width：0px; height：0px;}  
 
 < div class =screen > < canvas id =myCanvaswidth =300height =120> < / canvas>< / div>  

使它滚动到画布的最后，并且不显示任何下面的容器div？

谢谢！

解决方案

使画布成为块元素。默认情况下，canvas是一个内联元素，它的行为与 img 相似。因此，由于垂直对齐，您将出现空白问题（图片内部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 here to see from screen div，30，50）;

  .screen {background：red; height：100px;宽度：300px;溢出：自动; border-radius：20px;} canvas {display：block;} ::  -  webkit-scrollbar {width：0px; height：0px;}  

< div class =screen > < canvas id =myCanvaswidth =300height =120> < / canvas>< / 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>

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

Thanks!

解决方案

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屋！