p5.js 画布添加了不需要的滚动条答案

【问题标题】：p5.js canvas adds unwanted scrollbarp5.js 画布添加了不需要的滚动条
【发布时间】：2019-11-02 15:17:47
【问题描述】：

我正在使用它的父级中的值创建一个简单的 p5.js 画布，如下所示：

// Canvas properties
var $musicscape = $("#musicscape");

// p5.js functions
function setup() {
    var canvas = createCanvas(
        $musicscape.outerWidth(),
        $musicscape.outerHeight()) ;
    canvas.id("canvas")
    canvas.parent($musicscape[0]);
}

我的 musicscape 元素具有以下 sass 属性，并且在不创建任何滚动条的情况下采用正确的大小。

#musicscape
    position: absolute
    right: 0
    top: 0
    width: 50vw
    height: 100vh

这里是a jsfiddle which shows the error。

但是，当我添加与 html、body 和 #musicscape 元素具有精确大小的画布时，会添加一个垂直滚动条。删除它的唯一方法是将画布宽度设置为$musicscape.outerHeight() - 3，这也会在底部创建一条不属于画布一部分的小白线。 如何在保持画布与其父级大小相同的同时摆脱垂直滚动条？我检查过，我的页面上没有任何填充或边距。

顺便说一句，我正在 Chrome 上进行测试。

【问题讨论】：

您能发一个minimal reproducible example 让我们自己运行吗？
@KevinWorkman 我在帖子中添加了一个 jsFiddle

标签： javascript html canvas scrollbar p5.js

【解决方案1】：

CSS 灵活框布局模块
index.html

<!DOCTYPE html>
    <html>
<link rel="stylesheet" href="noscrollbars.css">
    <head>
      <meta charset="UTF-8" />
      <script src="p5.js"></script>
      <script src="myscript.js"></script>
    </head>  <body>  <main> </main> </body>
</html>

noscrollbars.css

html, body {
    height: 100%;
}
    body {
    margin: 0;
    display: flex;
        
    justify-content: center;
    align-items: center;
}

【讨论】：

【解决方案2】：

HTML 画布元素默认是内联元素 (list of inline elements)。因此，即使您将其高度设置为与其父级完全相同，它也会因行间距而溢出。为防止它在您的 SASS 文件中将 canvas 设置为块级元素。

#canvas
    display: block;

【讨论】：