Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MatthewAry opened this issue Jan 26, 2024 · 2 comments

Comments

@MatthewAry
Copy link

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.

Screen.Recording.2024-01-26.at.1.11.48.PM.mov

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

  • When scrolling up, (and not fetching more items from the server) the cursor and the scroll bar should remain relative to each other and the scroll bar should appear stable as it moves with the cursor.
  • When more items are retrieved and prepended to the list, the scroll bar should momentarily no longer track with the cursor that is dragging it, reposition itself, and then the cursor should resume dragging.

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

Platform:

  • OS: MacOS
  • Browser: Chrome
  • Version of this package: 0.22.1
  • Version of framework: react (as seen on the docs), vue 3

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 MatthewAry changed the title When used in chat applications, dragging the scroll bar up When used in chat applications, dragging the scroll bar up produces unstable behaviors Jan 26, 2024
@MatthewAry
Copy link
Author

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
Copy link
Owner

inokawa commented Jan 27, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants