Is there a way to preserve scroll position when prepending items?
I have an infinite list, paginated in both directions. There are no issues when scrolling down and appending items, however when scrolling up the scroll position switches to the first prepended item.
I understand this happens because scrollTop is 0 and stays 0 while the items get prepended. I tried working around it by scrolling to the previously visible item, but it's a very janky experience. Any tips?
What I might want:
- measure prepended items (no dom update)
- add top padding equal to measurement (dom update)
- scroll down equal to added padding (no dom update, other than scrolling)
- actually prepend items, remove padding (dom update)
11 Replies
fair-rose•3y ago
I'm very interested in this as well. I've been trying a route where I render the first
offset items as undefined (e.g., new Array(offset).fill(undefined).concat(itemArray)) -- so the height is pre-filled, but I can't get virtualizer to not try and load the 0-10 index items initially before I can tell it to scrollToIndex. So I can't find a solution here either.exotic-emerald•3y ago
Haven't tried to do this yet, but was planning on it so I'm interested as well.
harsh-harlequin•2y ago
I’m trying this also. Any solutions how to do it nicely?
broad-brown•13mo ago
Have you guys had any luck with it? Any tips on how to tackle this?
ambitious-aqua•12mo ago
I have the same issue.
There is a half-finished solution provided by tanstack.
I tested it in the newest versions and it works apart from minor fixable issues.
(FIXED)
-This works only of the top entries are loaded when the user scrolls perfectly to the top. loading before reaching the top (like normally) causes offset.
-the "gap" and "scroll margin" must be undefined or they cause unintended behaviour.
-my versions:
query: ^5.56.2
virtual: ^3.10.7)
https://stackblitz.com/edit/tanstack-query-xrw3fp?file=src%2Fpages%2Findex.js
Damian Pieczynski
StackBlitz
Query Load More Infinite Scroll Example (forked) - StackBlitz
Run official live example code for Query Load More Infinite Scroll, created by Tanstack on StackBlitz
ambitious-aqua•12mo ago
Update: with a minor edit it will possibbly work🤔🤔🤔
The scroll jumping when the list isn't scrolled to the top was caused by a typo in the original code.
I can load rows like normally on both sides so far.
fair-rose•12mo ago
hi, so what is the issue?
ambitious-aqua•12mo ago
There is a typo in the bi-directional infinite list example what causes the scroll to jump when it's not perfectly at the top when the new elements are added.
ambitious-aqua•12mo ago
+The scrolling jumps when the gap of the virtualizer isn't 0 and rows are loaded at the top.
+Jumping also happens when the view is near the bottom when the new rows are loaded at the top.
This happens because the scrolling is updated before the height of the list.
fair-rose•12mo ago
good catch, so all good now?
ambitious-aqua•12mo ago
As I mentioned, the scroll jumps when the view is at the bottom and rows are added to the top.
This happens when I scroll to the top to request a fetch then quickly scroll to the bottom.
It's not a big problem because it doesn't happens within normal circumstances.
The chance of this can be decreased by increasing the number of the fetched rows on the first fetch.
I think the scroll compensation should be built into the library because the bi-directional infinite list needs it in practical conditions (examples: all chat apps, discord)