初始加载后将滚动条添加到 canvas

Question

我正在使用 canvas，只有在必要时才需要添加滚动条。当页面加载时，没有足够的内容需要滚动条。我正在创建一个二叉搜索树可视化工具，用户可以在其中插入节点。每次插入节点对象时，它都会向下移动到下一层，最终导致节点被放置在屏幕之外。一旦尝试将节点放置在屏幕外，我想要一个滚动条。我尝试了以下方法，但没有任何运气。

function setup () { 
    var canvas = createCanvas(windowWidth - 100, windowHeight - 350);
}

canvas {
    border: 1px solid black;
    margin-left: 40px;
    overflow: auto;
}

我读过有关使用“auto”的内容，我的理解是，如果确定内容超过特定 space，它允许滚动。话虽如此，我不确定我是否误解了这个属性或者我是否使用不正确。

可能还值得一提，我正在使用 p5.js 库进行可视化。这是通过在访问页面后调用“setup”来实现的。我在项目的其他地方使用了“溢出：自动”，只要内容最初超过 space 就没有问题。这让我觉得我的第一个想法是我的问题。如果是这种情况，我将如何实现我的目标？

初步想法：

setup ( ) 只被调用一次，这就是为什么当内容开始超过创建的 space 时溢出起作用的原因。
我误解了如何处理溢出，应该使用“auto”以外的东西来处理这种特殊情况。

Answer 1

只要p5canvas小于window，滚动条就不会出现。您可以使用 resizeCanvas().

调整 canvas 的大小

初始加载后将滚动条添加到 canvas

Add scroll bar to canvas after initial load

javascript

css

overflow

html5-canvas

p5.js