Question

Let’s say I have a canvas with a fixed height and a vertical scroll bar. And the canvas has 10 children in a vertical line (like a VBox) whose combined height exceeds the height of the canvas. Based on the scroll bar position, only some of the children will be visible at a time.

Is it possible to determine which children are actually visible? Or whether or not a specific child is visible on screen?

Answer 1

I’m not sure on the timeliness of this answer, but I had a similar question recently and the following code worked for me:

if (item.y < container.verticalScrollPosition || item.y + item.height - container.verticalScrollPosition > container.height) {

     // item is not (completely) visible

}

Basically this is checking against the following criteria:

1) Is the item’s y position above the container’s current vertical scroll position (i.e. outside of the container’s top boundary)?

2) Is the item’s bottom position scrolled outside of the container’s bottom boundary? This is calculated using the item’s bottom position (i.e. the item’s y position plus its height) minus the current vertical scroll position.

If you want to check all of the items in a container, then you’d have to loop through and check each against these criteria. You could throw the above code in a function and return whether the item is visible or not. There might be a better/cleaner way, but I haven’t found one yet.