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.32k stars 45 forks source link

When used in chat applications, dragging the scroll bar up produces unstable behaviors #346

Open MatthewAry opened 9 months ago

MatthewAry commented 9 months ago

Describe the bug Please see the attached video.

https://github.com/inokawa/virtua/assets/157217/6f258d99-5864-44dd-a4d3-b2afdbb46e58 This video is from the React Example found at https://inokawa.github.io/virtua/?path=/story/advanced-chat--default

In addition, here is a reproduction from my implementation that uses Vue 3.

https://github.com/inokawa/virtua/assets/157217/814fab8b-0d46-40a2-ad3c-f982e88c9ec2

To Reproduce You can easily reproduce this behavior on the storybook example, however a reproduction that uses vue is harder to come by ATM.

Expected behavior

I'm curious as to what applications like discord do for this? 🤔

Platform:

Additional context This is the only off the shelf virtual scroller that I have found that shows a decent chat example and implementation. Good Job!

MatthewAry commented 9 months ago

BTW I looked at other chat applications that have to do virtualized scrolling and it seems that they still have jitter when you're dragging the scroll bar but they don't drift from their relative position with the cursor until it loads in more data.

inokawa commented 9 months ago

It is browser's native behavior for the scrollbar to follow the dragging, so maybe they do some tricky approach.