Skip to content

Scrollbox : bounds update issues #226

@Durss

Description

@Durss

When creating a scrollbox we have to set the width and height of the box on init.
If later we update these, internal drag/scroll limits are, apparently, not updated accordingly.

Bellow is a video of a small demo where I initialize the Scrollbox with a 100px height.
Then i update that height to fill available space.

20250518-1439-50.3114962.mp4

Few issues highlighted here:

  • items outside the first 100px get hidden after a short time
  • when dragging content items bottom limit is at 100px instead of the updated height
  • when scrolling with wheel limits are OK, but items belllow 100px disapear after ~1s

I can't totally exclude an error on mine or from my context but I don't see what it could be.
I don't have much time to create a minimal repro for now but I'll try to do one later if you need to.

Expected Behavior

The scrolling limits should fit to the new bounds

Current Behavior

The scroll stops at the proper bounds when using mouse wheel, but then all items bellow the original "100px" limit are hidden (probably an internal optimization of the component that hides items theoretically out of view)
When dragging the list with the mouse, the content's position is limited based on the original height instead of the new one, the last item can go much higher than it should. if we stop dragging before that limit, items bellow the first 100 pixels are hidden the same way as when scrolling with the mouse wheel

Possible Solution

¯\_(ツ)_/¯

Steps to Reproduce

const items = [];
// Create 20 sprites
for(let i = 0; i < 20; i++) {
	items.push(new PIXI.Sprite(PIXI.Assets.get("xxx")))
}

// Create a scroll box with a 100px height
const scrollBox = new ScrollBox({
	width: 500,
	height: 100,
	background: 0xF00000,
	vertPadding: 10,
	horPadding: 20,
	items,
	elementsMargin: 10,
	type: "vertical",
	globalScroll: true,
});


// Update the scroll box size to 500px
scrollBox.setSize(scrollBox.width, 500);
scrollBox.resize(true);//Tried this thinking it would help but it doesn't

From there scrolling is glitchy

Environment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions