Javascript js画布添加了不需要的滚动条
我正在使用父级的值创建一个简单的p5.js画布,如下所示:Javascript js画布添加了不需要的滚动条,javascript,html,canvas,scrollbar,p5.js,Javascript,Html,Canvas,Scrollbar,P5.js,我正在使用父级的值创建一个简单的p5.js画布,如下所示: //画布属性 var$musicscape=$(“#musicscape”); //p5.js函数 函数设置(){ var canvas=createCanvas( $musicscape.outerWidth(), $musicscape.outerHeight()); canvas.id(“canvas”) canvas.parent($musicscape[0]); } MyMusicCape元素具有以下sass属性,并且在不创
//画布属性
var$musicscape=$(“#musicscape”);
//p5.js函数
函数设置(){
var canvas=createCanvas(
$musicscape.outerWidth(),
$musicscape.outerHeight());
canvas.id(“canvas”)
canvas.parent($musicscape[0]);
}
MyMusicCape
元素具有以下sass属性,并且在不创建任何滚动条的情况下具有正确的大小
#musicscape
position: absolute
right: 0
top: 0
width: 50vw
height: 100vh
这是
但是,当我添加画布时,会添加一个垂直滚动条,该画布的大小与我的html
、body
和#musicscape
元素的大小相同。删除它的唯一方法是将画布宽度设置为$musicscape.outerHeight()-3
,这也会在底部创建一条不属于画布的小白线如何在将画布保持为其父级大小的同时去掉垂直滚动条?我检查了,页面上没有任何填充或边距
顺便说一句,我正在Chrome上测试。HTML画布元素默认为内联元素()。 因此,即使您将其高度设置为与其父级完全相同,它也会因行距而溢出。要防止它,请在SASS文件中将canvas设置为块级元素
#canvas
display: block;
你能发布一个我们可以自己运行的消息吗?@KevinWorkman我在我的帖子中添加了一个jsFiddle