I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where users can insert nodes. As more nodes are inserted, they move down to the next level, eventually leading to nodes being placed off-screen. My goal is to have a scroll bar appear when a node is attempted to be placed off-screen. However, I have attempted the following solutions without success.
function setup () {
var canvas = createCanvas(windowWidth - 100, windowHeight - 350);
}
canvas {
border: 1px solid black;
margin-left: 40px;
overflow: auto;
}
After reading about using "auto," my understanding is that it allows scrolling if the content surpasses a certain space. Despite this, I am unsure whether I am misinterpreting this property or implementing it incorrectly.
It is important to note that I am utilizing the p5.js library for visualization. The library functions by calling "setup" once the page loads. In other parts of my project, I have used "overflow: auto" successfully when the content exceeds the initial space. This leads me to believe my issue lies in another area. If this is the case, how should I proceed to achieve my desired outcome?
Initial Ideas:
- The fact that setup() is called only once may explain why overflow works when the content initially exceeds the space provided.
- I might be misunderstanding how to deal with overflow and may need to explore alternate options rather than just using "auto."