我正在使用此答案在div中滚动画布。我也隐藏了滚动条。问题在于它似乎滚动得太远,在这种情况下,如果向下滚动,您会看到画布所在的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; } ::-webkit-scrollbar { width: 0px; height: 0px; } <div class="screen"> <canvas id="myCanvas" width="300" height="120"> </canvas> </div>
我如何才能使其仅滚动到画布的末尾,而不在下面显示任何容器div?
谢谢!
将画布作为block元素。默认情况下,canvas是一个内联元素,其行为与img; 相似。因此,由于垂直对齐,您将出现空白问题div内的图像在图像下方有多余的空间
block
img
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>