search

inokawa / virtua

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.
https://inokawa.github.io/virtua/
MIT License
1.3k stars 44 forks source link

Calling another smooth scroll before previous smooth scroll completes causes strange behavior #221

Closed aeharding closed 1 year ago

aeharding commented 1 year ago

Hello! Thank you for the smooth scrolling support. It works very well, with the only following bug I've found.

Describe the bug

Calling another smooth scroll before previous smooth scroll completes causes strange behavior

To Reproduce

Call virtuaRef.scrollToIndex(1, { smooth: true });, then before smooth scroll is complete, virtuaRef.scrollToIndex(2, { smooth: true }); then virtuaRef.scrollToIndex(3, { smooth: true });

Observe once it scrolls to the third item, smooth scrolling goes back to the second item. It's like there is some strange queuing logic happening that's not being cancelled.

Expected behavior

User calling scrollToIndex should cancel any previous smooth scroll

Platform:

inokawa commented 1 year ago

Could you try 0.15.1? Thank you for reporting it!.

aeharding commented 1 year ago

Could you try 0.15.1? Thank you for reporting it!.

Yes this appears to be resolved! However, is it just me, or is there a short 200ms-ish delay on starting a smooth scroll? It makes pressing the scroll button feel a bit laggy in my test. I can make a new issue if that helps.

inokawa commented 1 year ago

It's intended one but there may be room for improvement.

Destination of browser's native smooth scrolling can't be changed during scrolling. So what we can do is measuring all items before scrolling, or scrolling several times like react-virtuoso, (or implement easing with requestAnimationFrame by ourself). Now the first one implemented.

I'm thinking now is cutting down the measurement lags as much as possible and skip some measurements for already measured items, .

aeharding commented 1 year ago

I see! For what its worth, this lag doesn't seem to be present in 0.15.0.

inokawa commented 1 year ago

@aeharding I hope it was resolved in 0.15.3. Thank you for your helpful feedback!

aeharding commented 1 year ago

Thanks! The responsiveness is fixed :)

I am only experiencing one other issue. This is where I scroll very far down my feed. Then, when I tap to go to the top, the first tap doesn't work. The following tap works.

In this case, I'm always scrolling to the top of the page, index = 0 if it helps for optimization purposes :)

Let me know if you would like a separate issue for this.

inokawa commented 1 year ago

Could you raise another issue please? I may not understand the situation correctly.

You said calling scrollToIndex should cancel any previous smooth scroll but should it be changed in some case? Thanks.