Is there a way to consistently do auto scroll on page load?

[ryanzec]

Is your feature request related to a problem? Please describe. I have a page that I need to auto scroll when the page loads however if the scrollable element is also being initialized on that page load, I have issues with getting the auto scroll to work consistently.

At first it was not scrolling at all and it seemed like it was because the overlay scrollbars was not initialized so the scrollHeight at the time I was calling scrollTo() on the element was not right so I added code to do:

// using scrollElement.parentElement since the scrollElement in the content element and not the initialize element
instance = OverlayScrollbars(scrollElement.parentElement)

and it waits until instance is populated (or a timeout triggers to avoid infinite loop). This does properly wait until instance is populated and the value of scrollHeight is now correct when I call scrollTo(), The scrolling now works most of the time but there are still random points where it fails. I tried to add to the initialize / 'updateevents add those seem to never be called. I tried usingrequestAnimationFrame()` but that did not work. The only things that seems to work consistently (though I am sure there will be time where it won't, just low chance) is by adding this:

instance = OverlayScrollbars(scrollElement.parentElement)

await new Promise((resolve) => setTimeout(resolve, 250));

Now I am pretty sure this is not a great way to fix this issue however I just can't seem to find any way to know when overlay scrollbars are completely ready for me to call scrollTo() on the viewport without it failing.

This seems to only be an issue if the overlay scrollbar is initializing on the load of the page. This example is using a SPA and if I am on a different page that have the overlay scrollbar element already initialized and I move to the page with the auto scroll functionality (the overlay element does not change, just the elements in it), the auto scroll seems to work every time.

Describe the solution you'd like I am creating this as a feature as I am not sure if it is a bug but I am looking for a way to be able to when the viewport is ready to call scrollTo() on it and have it work properly.

Describe alternatives you've considered I am opened to other ideas I have not thought of.

[KingSora]

@ryanzec Good day :)

If I'm understanding you correctly, you want to scroll to a certain scroll position after OverlayScrollbars is initialized.. This should be pretty straight forward, I can create a small example for you. But before that please answer those questions first:

1. Is the content of the scroll element static or changed via javascript in any way?
2. Can I assume that as soon as the OverlayScrollbars viewport has any overflow I'm ready to scroll?

[ryanzec]

1. Is the content of the scroll element static or changed via javascript in any way?
2. Can I assume that as soon as the OverlayScrollbars viewport has any overflow I'm ready to scroll?

@KingSora Thanks for the reply, to answer your questions:

1. The data is dynamic, I am using svelte but the content initially is empty and then loaded on the client side.
2. That would be correct.

[KingSora]

@ryanzec Here is a simple example: https://stackblitz.com/edit/vitejs-vite-utea9y?file=main.js

Its not in svelte but uses vanilla javascript.. the concept should be the same though. If the example is not matching the conditions of your app please feel free to adapt it and send your version which I could then adapt.