Add scroll bar to canvas after initial load

Question

I'm using canvas and need to add a scroll bar only when necessary. When the page loads there is not enough content for a scroll bar to be necessary. I am creating a binary search tree visualizer where the user can insert nodes. Each time a node object is inserted it is moved down to the next level which eventually results in nodes being placed off the screen. I want to have a scroll bar once an attempt is made to place a node off screen. I have tried the following and am not having any luck.

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

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

I have read about the using "auto" and my understanding is that it allows the ability to scroll if it is determined that the content exceeds a particular space. That being said I am not sure if I am misunderstanding this property or if I am using it incorrectly.

It may also be worth mentioning, I am working with the p5.js library for visualization. This works by calling "setup" once the page is accessed. I have used "overflow: auto" in other places in my project and have had no issues as long as the content exceeds the space initially. This makes the feel like my first thought is my problem. If this is the case, how would I go about achieving my goal?

Initial Thoughts:

setup ( ) is only called once and this is why overflow works in cases where the content starts off by exceeding the space created.
I am misunderstanding how to handle overflow and should use something other than "auto" to handle this particular case.

Can you please post a minimal reproducible example? I don't see any code that increases the size of the canvas after it's created? Also, the code in your post mixes JavaScript and CSS. Are they in two different files? If so can you make that more obvious? Finally, a couple things I would try: give your canvas a height in your CSS, or use the parent() function and give the parent element a height in your CSS. — Kevin Workman
– Kevin Workman, Commented Jan 5, 2021 at 2:08

0mlml · Accepted Answer · 2021-01-07 14:21:21Z

1

A scroll bar does not appear from the p5 canvas as long as it is smaller than the window. You can resize the canvas using resizeCanvas().

answered Jan 7, 2021 at 14:21

0mlml

1428 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nbair Over a year ago

So there is no way to add a scrollbar to the canvas using css? The only way to make this work would be to resize the canvas to exceed the screen? If that's the case I think I will have to go about this another way.

Collectives™ on Stack Overflow

Add scroll bar to canvas after initial load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related