How to solve the problem of window flickering when scrolling

[A-kirami]

Hello, I'm using virtual lists with OverlayScrollbars, but I noticed a problem.
When the page is first loaded, scroll to the bottom immediately, and the window will flicker slightly.
I used ScreenToGif to record this process at 60 frames.

We can see that the content scrolls to the bottom after two frames, which makes the page flicker.
How to solve this problem?
Here is an example: https://codesandbox.io/p/devbox/sweet-star-vg5t34?workspaceId=b2fd163a-c4eb-4e69-a30e-1c5e368184e0

[KingSora]

@A-kirami You are scrolling as soon as OverlayScrollbars initializes. At the same time you are using the defer: true option which defers the initialization to a point in time where the browser is idle. The flickering you're seeing is the time between the VirtualList and OverlayScrollbars initialization.

You can solve this in two ways:

1. Don't use defer: true and keep your code like you have it now: https://codesandbox.io/p/devbox/eager-joji-g7w8zn?workspaceId=b640333a-16e9-425d-8bf5-8042416c19c4
2. Keep defer: true and scroll as soon as the VirtualList initializes and when OverlayScrollbars initializes: https://codesandbox.io/p/devbox/tender-lewin-mlw7yv

[A-kirami]

Thank you so much for your helpful response! It really cleared up my question. I appreciate your time and expertise.

[KingSora]

@A-kirami With a optimization I did in v2.7.0 the scroll position is now preserved when initializing OverlayScrollbars with a viewport element. This simplifies the code to: https://codesandbox.io/p/devbox/awesome-nash-zfsct4?file=%2Fsrc%2Fcomponents%2FMessageList.vue

Notice how the initialized event not needed anymore and virtualList.scrollTo(9999, 9999); is the only scroll command needed