When using the Quasar framework, I encountered a challenge with scrolling to a specific child element after the page has loaded. Currently, I achieve this by implementing a delay using setTimeout, but I am seeking a more reliable solution.
My current approach involves waiting for all children to mount (using nextTick) and assuming that it would be ready for scrolling, however, this is not the case. Another option could be waiting for all images to load (as QImg has an @load event), but this occurs too late since manual scrolling can already take place while the image boxes are being rendered and loaded.
Is there a better way to trigger the scroll at the 'earliest possible moment'?
In the parent component Point-panel:
// Vue instance code goes here
In the child components Images/small-cards:
// Vue small-cards component code goes here
You can view the issue demonstrated in this JSFiddle. A scroll button has been added to showcase successful scrolling after loading (the 6th picture, the 'Tiger', scrolls to the bottom-left corner).
EDIT: To provide some direction to the question - the problem arises when the scroll is triggered too early before the DOM is fully rendered, therefore the distance to scroll cannot be determined. After the mount phase, I expect the DOM to be complete. Why does the current approach fail in achieving this goal?