search

Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.74k stars 915 forks source link

Reversed vertical scrolling and infinite scroll #870

Open Oleksii14 opened 6 months ago

Oleksii14 commented 6 months ago

Clear and concise description of the problem

I tried to implement a reversed vertical scrolling behaviour using DynamicScroller and infinite scroll behaviour like in the average chat. I also checked the Chat demo before the implementation.

The first thing to note is that the chat demo doesn't contain the infinite scroll behaviour like in the real chats. Also, during the stream, the scroll position is always being reset to the bottom.

Approaches I used:

  1. flex-direction: column-reverse applied to the scroller element. this causes the items to disappear from the view at all.
  2. calling scrollToBottom after the scroller init which works well only with the items that have a fixed height (for example, when the images are rendered, the scrollToBottom doesn't actually scroll to the bottom and the scroll position is somewhere in the middle of the container). Also, when the infinite scroll logic adds new items to the list, the scroll position is reset to the top position of the scroll container.
  3. page mode combined with flex-direction: column-reverse. works, but causes scrolling glitches

Am I missing something or this case was not covered? It would be great to have a working example. FYI the discussions page is not working in this repo 😢

Suggested solution

-

Alternative

No response

Additional context

No response

Validations

Oleksii14 commented 6 months ago

https://github.com/Akryum/vue-virtual-scroller/assets/36737084/73bdfa51-d2e3-4af9-9d9f-2ddbfb3303e2

Here is a repo and a video with the reproduction of one of the described cases (see scrolling glitches after scroll to bottom)

brunoinds commented 4 weeks ago

Same error here. In my case, its not required to reach the bottom to starts to glitch when scrolling up.

I'm using Ionic + Vue, and it seams the problem only occurs when using mobile devices, like Safari for iOS. Safari for macOS, or Google Chrome does not reproduces the error.

https://github.com/user-attachments/assets/8fb33025-024d-436a-b655-dce12a96f187

Any thoughts on this issue?