Replies: 10 comments 66 replies
-
|
The only thing that worked for us so far is a double As you've noticed both prepending or appending an item would change scroll height, but prepending pushes visible content while appending does not The
It's relatively easy to try it out, but it has some potential drawbacks
So here it is:
Pushing more items would add them to the top but would not cause scroll/content issues Since your case is a chat - I'm not sure whether there won't be the same problem when new messages arrive and they need to be added to the bottom. It might be possible to just scroll to index 0 (bottom) when new messages arrive (if you were already on the bottom) For our case the scaleY hack works BTW you also have to invert the mouse useEffect(() => {
const el = parentRef.current;
const invertedWheelScroll = (event) => {
el.scrollTop -= event.deltaY;
event.preventDefault();
};
el.addEventListener('wheel', invertedWheelScroll, false);
return () => el.removeEventListener('wheel', invertedWheelScroll);
}, []); |
Beta Was this translation helpful? Give feedback.
-
|
Have you had any success with keyboard navigation with this method? I tried this and tab works in the reverse order. Arrow keys work in the correct order until you hit the edge of the viewable area, and then it will try to scroll more item into view but scrolls in the opposite direcition. Have you hit either of these issues? |
Beta Was this translation helpful? Give feedback.
-
|
Man, this gets hairy- you gotta
EDIT/UPDATE I think you can actually do 4. with the I have a loosely passable POC but it's not in a good state to share at the moment. happy to discuss + send snippets if there is still interest. This blog post was helpful for me |
Beta Was this translation helpful? Give feedback.
-
|
@agamrp let me know if you manage to solve the I've flung myself at it a couple times and gotten close but it's super tricky because there is no "wait for scroll to complete" in JS.. so the issue that I have seen is that scroll height jumps around too much with that approach. One option might be to use both? IE use index to get a rough position and avoid a big jump and then later use offset to fine tune? Haven't really tried that approach yet. |
Beta Was this translation helpful? Give feedback.
-
|
@jpribyl Have a favor to ask if you have time. Have you tested your solution on iOS and Safari yet? I've played around with other virtualized libraries that have prepending built in but run into weird behavior where while scrolling up the list will sometimes jump to the top of the new data instead of keeping scroll position, along with some flickering. If you scroll slowly up then it keeps scroll position better. I was hoping you may have figured out a way to solve this? Or a way to cancel scroll events while data is being loaded? Attaching video to help clarify: Blinking.And.Jumping.720.mov |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, I haven't really played around with it- I do most of my dev work on firefox + chrome but I'll take a look next time I have a mac in front of me. |
Beta Was this translation helpful? Give feedback.
-
|
Got it thanks, yeah appreciate it when you get a chance and also if you get hold of iOS device to try it on. I'll let you know what I find out on my end |
Beta Was this translation helpful? Give feedback.
-
|
@agamrp just FYI I have played around with it a bit on safari
I have not seen this, thankfully
There is a small amount of occasional flickering. But tbh it's pretty rare and not very noticeable so I don't plan to really look into it more at this point. I think it could be mitigated with better loading strategies. The largest issue I am still grappling with is images. They aren't available when the initial measurement takes place which means you must either
Haven't had a ton of time to devote to it but all in all it's working pretty darn well |
Beta Was this translation helpful? Give feedback.
-
|
I think we can go with this https://codesandbox.io/s/beautiful-meninsky-fr6csu?file=/pages/index.js The trick is to update scroll offset in same time when new items are prepend, and reverse indexes. |
Beta Was this translation helpful? Give feedback.
-
@abdullaev388 the idea is the same, only difference is that you need to pass scroll element https://codesandbox.io/p/sandbox/frosty-morse-scvryz |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your idea Damian. Could you, please, help me to understand what is the purpose of this code? I debugged it at |
Beta Was this translation helpful? Give feedback.
-
|
Here's how the code works: The The The If there are no virtual items in the container, the paddingTop and paddingBottom variables are set to 0. The Overall, this code block is used to calculate the padding for the top and bottom of the container, to ensure that the first and last paragraphs are not cut off when the user scrolls through the container. Source: Copilot |
Beta Was this translation helpful? Give feedback.
-
@piecyk your sample works perfectly, thank you for that. I'm currently trying to add a scroll-to-bottom on submit feature to it, but I can't get it to work that way, it always scrolls to the second last message, no matter what I try, even using a very large offset doesn't seem to help: I set scrollRef inside the onSubmit callback. |
Beta Was this translation helpful? Give feedback.
-
|
@piecyk Thank you for your sample! Could you provide same example that works with bi-directional infinite query? I tried but just couldn't get the padding correct |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I ended up in this issue a couple of days ago searching for an efficient way to have two-direction infinite loader+scrolling with virtual and react-table. Your answers above helped a lot and I ended up with an approach that I believe works well enough. (Still wip - especially from the perf aspect) I work at netdata and you can check the end result (without signup or anything) here. 480p.movI used both react-table and react-virtual. Now for the problem at hand, bi-directional infinite scrolling, I used the usual implementation for infinite loading with the difference of adding a second The gist of what I used is this: So in our use case:
The same happens when the user keeps scrolling up and fetches more and more data. All of the above are happening with just a small flickering the minute before Hope this helps anyone who wants to try something similar. |
Beta Was this translation helpful? Give feedback.
-
Man, you literally saved me after 2 days of trying to solve this issue, thank you so much. 🔥 |
Beta Was this translation helpful? Give feedback.
-
|
@piecyk that example is working great! I have a strange issue thought which I can't reproduce on the oft-chance you have an idea as to what's happening. Some of my users randomly get in a state where the infinite scroller gets "stuck" after a |
Beta Was this translation helpful? Give feedback.
-
|
@Xhale1 hard to say, are the items dynamic? Mybe after they are loaded virtualiser is trying to sync the scroll, check what is calling scroll, checkout the shouldAdjustScrollPositionOnItemSizeChange. |
Beta Was this translation helpful? Give feedback.
-
|
Interesting. I fiddled around with I added some hacky code where I I'd love to help contribute to a chat-like reverse infinite scroll if that's something you're interested in Last question: in this example you made last year you a useRef for the virtualizer and padding for offsets, but the above example seems a great deal more simple. Is there any particular reason for doing it one way or another? |
Beta Was this translation helpful? Give feedback.
-
this legit just saved me an endless time of researching 😅 , thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Did somebody have success reversing the arrow and |
Beta Was this translation helpful? Give feedback.
-
|
if anyone is interested, I have managed to create a reversed chat-like layout with https://stackblitz.com/edit/vitejs-vite-e28dau?file=src%2FVirtualList.tsx Component for referenceimport React, { CSSProperties, useCallback, useEffect, useRef } from 'react';
import { VirtualItem, useVirtualizer } from '@tanstack/react-virtual';
export type VirtualListProps<T> = {
className?: string;
style?: CSSProperties;
itemClassName?: string;
itemStyle?: CSSProperties;
items: T[];
getItemKey: (item: T, index: number) => string | number;
renderItem: (item: T, virtualItem: VirtualItem) => React.ReactNode;
estimateSize: (index: number) => number;
overscan?: number;
};
export function VirtualList<T>({
style,
itemStyle,
items,
getItemKey,
estimateSize,
renderItem,
overscan,
}: VirtualListProps<T>) {
const scrollableRef = useRef<HTMLDivElement>(null);
const getItemKeyCallback = useCallback(
(index: number) => getItemKey(items[index]!, index),
[getItemKey, items]
);
const virtualizer = useVirtualizer({
count: items.length,
getItemKey: getItemKeyCallback,
getScrollElement: () => scrollableRef.current,
estimateSize,
overscan,
debug: true,
});
useEffect(
function scrollToEnd() {
virtualizer.scrollToIndex(items.length - 1);
},
[items]
);
const virtualItems = virtualizer.getVirtualItems();
return (
<div
style={{
display: 'flex',
flexDirection: 'column-reverse',
...style,
}}
>
<div
ref={scrollableRef}
style={{
overflow: 'auto',
}}
>
<div
style={{
width: '100%',
position: 'relative',
height: virtualizer.getTotalSize(),
}}
>
<div
style={{
position: 'absolute',
top: '0',
left: '0',
width: '100%',
transform: `translateY(${virtualItems[0]?.start ?? 0}px)`,
}}
>
{virtualItems.map((virtualItem) => {
const item = items[virtualItem.index]!;
return (
<div
key={virtualItem.key}
ref={virtualizer.measureElement}
data-index={virtualItem.index}
style={itemStyle}
>
{renderItem(item, virtualItem)}
</div>
);
})}
</div>
</div>
</div>
</div>
);
}
|
Beta Was this translation helpful? Give feedback.
-
|
@mechanicalbot great, one note is that |
Beta Was this translation helpful? Give feedback.
-
|
thanks for the tip, example updated |
Beta Was this translation helpful? Give feedback.
-
|
@mechanicalbot does this work with dynamic size elements? e.g. chat UI |
Beta Was this translation helpful? Give feedback.
-
|
if the items are only a few, it will be at bottom, how to make it top when only a few items that can't fill one screen |
Beta Was this translation helpful? Give feedback.
-
|
I just solved it by making sure estimateSize is always larger than the list elements. const virtualizer = useVirtualizer({
estimateSize: () => 999,
// ...
});
// ...
useEffect(
() => {
virtualizer.scrollToIndex(items.length - 1);
},
[items]
); |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, this is a tough problem. The engineering effort to implement a ChatRoom-like feature with TanStack virtual seems massive. A bidirectional, infinite loader just doesn't seem possible without side effects that create a pretty poor UX when it comes to loading in paginated messages in the scroll window. It would be amazing to work together to create something easy to use like message list provided by virtuoso, albeit not for free. |
Beta Was this translation helpful? Give feedback.
-
|
@henryogunrinde well quit teasing us! |
Beta Was this translation helpful? Give feedback.
-
|
Lol, can you give me a fork of a codepen or similar that uses tanstack query and virtual, so i can make changes on it. That should make it easier for me. |
Beta Was this translation helpful? Give feedback.
-
|
@henryogunrinde you can share the adjust position after to items loaded, like in this example #195 (reply in thread) scroll is adjusted if addedToTheBeginning const firstId = data?.pages[0].nextId ?? 0;
const addedToTheBeginning = firstId < prevId;
prevId = firstId;
if (addedToTheBeginning) {
const offset = (virtualizer.scrollOffset +
(data?.pages[0].data ?? []).length * itemSize);
virtualizer.scrollOffset = offset;
virtualizer.calculateRange();
virtualizer.scrollToOffset(offset, { align: 'start' });
} |
Beta Was this translation helpful? Give feedback.
-
|
@piecyk I will type it here, give me some minutes. |
Beta Was this translation helpful? Give feedback.
-
hi do you have the code? thanks. |
Beta Was this translation helpful? Give feedback.
-
|
@piecyk I have extracted the relevant snippets, just to give you an idea. const Dynamic = () => {
const prevDataRef = useRef<typeof data>();
const scrollerRef = useRef<HTMLDivElement | null>(null);
const virtualizerRef = useRef<Virtualizer<
HTMLDivElement,
HTMLDivElement
> | null>(null);
const {data} = useInfiniteQuery({
queryKey: ['projects'],
queryFn: async ({pageParam}) => {
const res = await axios.get('/api/projects?cursor=' + pageParam);
return res.data;
},
initialPageParam: 0,
maxPages: 3, // Must be greater than 2
getPreviousPageParam: (firstPage) => {
return firstPage.previousId ?? undefined
},
getNextPageParam: (lastPage) => {
return lastPage.nextId ?? undefined
},
});
// ℹ️ Since this is a bidirectional infinite loader, when you scroll
// to the start of the list, items are added to the top. Also, as you
// scroll to the end of the list, older items at the top will be removed
// to maintain optimal performance. This will cause a layout shift, and
// we need to do scroll anchoring at this point. firstItemOffset is the
// total number of items that was added or removed from the top.
// PS: Negative value implies removal.
const firstItemOffset = calculateOffset(data, prevDataRef.current);
// ℹ️ This prevents multiple executions of the restoreScrollOffset function,
// which occurs in React StrictMode where useEffects will run twice
const restoredScrollOffsetRef = useRef<boolean>(false);
useLayoutEffect(() => {
// ℹ️ We can reset this flag at this point.
restoredScrollOffsetRef.current = false;
prevDataRef.current = data;
});
const restoreScrollOffset = useCallback(
(firstItemOffset: number) => {
if (firstItemOffset === 0) return;
if (restoredScrollOffsetRef.current) return;
if (!virtualizerRef.current) return;
const virtualizer = virtualizerRef.current;
if (firstItemOffset > 0) {
// ℹ️ Re-calculate the measurementsCache
// to get the size of newly added items.
virtualizer.calculateRange();
}
// ℹ️ When items are removed, this function should be called before the
// useVirtualizer hook so that we can get the size of the removed items.
// Conversely, when items are added, it should be called after the hook,
// so that we can get the size of the added items.
const offsetItemCache =
virtualizer.measurementsCache[Math.abs(firstItemOffset)];
const delta =
offsetItemCache.start -
virtualizer.options.paddingStart -
virtualizer.options.scrollMargin;
const scrollOffset = virtualizer.scrollOffset;
const adjustments = firstItemOffset < 0 ? -delta : delta;
scrollToOffset(virtualizer, scrollOffset, {
behavior: undefined,
adjustments: adjustments
});
// Set the scrollOffset within this render,
// to display the current range of items.
virtualizer.scrollOffset = scrollOffset + adjustments;
restoredScrollOffsetRef.current = true;
},
[]
);
// ⚠️ This is done before the useVirtualizer hook so that we can
// use the measurement cache of the removed items before the
// cache is reset in the virtualizer instance.
useMemo(() => {
if (firstItemOffset < 0) {
restoreScrollOffset(firstItemOffset);
}
}, [firstItemOffset, restoreScrollOffset]);
const listItems = useMemo(
() => data.pages.flatMap((page) => page.data) ?? [],
[data]
);
virtualizerRef.current = useVirtualizer({
count: listItems.length,
getScrollElement: () => scrollerRef.current,
getItemKey: useCallback((index) => listItems[index].id, [listItems]),
estimateSize: () => 150,
});
const virtualizer = virtualizerRef.current;
// ⚠️ This is done after the useVirtualizer hook so that we can
// use the measurementsCache of the added items.
useMemo(() => {
if (firstItemOffset > 0) {
restoreScrollOffset(firstItemOffset);
}
}, [firstItemOffset, restoreScrollOffset]);
if (firstItemOffset === 0) {
// ℹ️ When there is no change to the first item,
// we allow the scroll anchoring of the library.
virtualizer.shouldAdjustScrollPositionOnItemSizeChange = undefined;
} else {
// ℹ️ If we need to do manual scroll anchoring for changes to the first item,
// we will disable that of the library when items are removed, and we enable
// it for newly added items, so that the scroll can be adjusted for their sizes.
virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item) => {
if (firstItemOffset < 0) {
return false;
} else {
return item.index < Math.abs(firstItemOffset);
}
};
}
return (
<div
ref={scrollerRef}
style={{
height: "100%",
width: "100%",
// ℹ️ Disable browser scroll anchoring
// since it affects restoreScrollOffset
overflowAnchor: "none",
overflowY: "auto"
}}>
{/* Other stuffs.*/}
</div>
);
};
function calculateOffset<Data>(data: any, prevData: any) {
if (!data || !prevData) {
return 0;
}
if (prevData.pageParams[0] === data.pageParams[0]) {
return 0;
}
if (prevData.pageParams[0] === data.pageParams[1]) {
return data.pages[0].data.length;
} else if (prevData.pageParams[1] === data.pageParams[0]) {
return -prevData.pages[0].data.length;
} else {
return 0;
}
}
const scrollToOffset = (
virtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>,
offset: number,
{
adjustments,
behavior
}: {
adjustments: number | undefined;
behavior: ScrollBehavior | undefined;
}
) => {
virtualizer.options.scrollToFn(offset, {behavior, adjustments}, virtualizer);
}; |
Beta Was this translation helpful? Give feedback.
-
|
You're a genius @henryogunrinde. May tinker and see if I can get this working and create an easy abstraction for others |
Beta Was this translation helpful? Give feedback.
-
|
You are welcome, just give me credit on the abstraction you create, I would love to show my friends that I had a little impact here. |
Beta Was this translation helpful? Give feedback.
-
|
@henryogunrinde of course. I'm very busy trying to get some products ready for launch this holiday season, but after I can try and get some of this done. I promise, if a PR is made into TanStack Virtualizer that helps people do this by me, you will get all the credit you deserve! |
Beta Was this translation helpful? Give feedback.
-
|
Any update on whether this might make it into the virtualizer |
Beta Was this translation helpful? Give feedback.
-
|
For anyone having issues with this package, We have just migrated to Virtua, and it's much better. It has a simpler API and more features. I suggest giving it a try. |
Beta Was this translation helpful? Give feedback.
-
|
I may have set it up weirdly |
Beta Was this translation helpful? Give feedback.
-
|
OMG, I struggled so hard to make tanstack/virtual work and yet it doesn't support reverse scrolling (and doesn't work with react compiler) but with |
Beta Was this translation helpful? Give feedback.
-
|
@ms-dosx86 is it possible for you to give a link to how you did it ? I've struggled to setup |
Beta Was this translation helpful? Give feedback.
-
|
@Fredkiss3 not a full example but I can share my chat container component's source code export function ChatContainer(props: { serverId: number }) {
const messages = useChat(useShallow(selectRoomMessages(props.serverId, 0)));
const user = useUserStore((state) => state.user);
const virtualRef = useRef<VListHandle>(null);
const prevMessagesLengthRef = useRef(messages.length);
// Scroll to bottom when appropriate
useEffect(() => {
if (messages.length > prevMessagesLengthRef.current) {
const newMessage = messages[messages.length - 1];
if (virtualRef.current) {
// Calculate distance from bottom
const distanceFromBottom =
virtualRef.current.scrollSize -
(virtualRef.current.scrollOffset + virtualRef.current.viewportSize);
// Scroll if it's the user's own message
if (newMessage && newMessage.sender_id === user?.id) {
virtualRef.current.scrollToIndex(messages.length - 1, {
align: "end",
});
}
// Or if user is already near the bottom (within 100px)
else if (distanceFromBottom < 100) {
virtualRef.current.scrollToIndex(messages.length - 1, {
align: "end",
});
}
}
}
prevMessagesLengthRef.current = messages.length;
}, [messages.length, user?.id]);
return (
<VList
ref={virtualRef}
style={{
height: "100%",
width: "100%",
overflow: "auto",
}}
className="h-full overflow-auto pr-10"
reverse
>
{messages.map((message, index) => (
<ChatMessage
key={message.id}
message={message}
serverId={props.serverId}
className={index === 0 ? "" : "mt-2"}
/>
))}
</VList>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
@ArianHamdi thanks mate, worked like a charm 👌🏻 |
Beta Was this translation helpful? Give feedback.
and others
-
We have been using react-virtual for a few months, and love the fact that the library is headless and allow us to do things our way... However, we are trying to build a chat-like virtual list that starts at the bottom, we then prepend elements to the list when we reach the top. Nothing too fancy except that the messages have fairly variable sizes.
The problems started to show up when we started experimenting with bigger messages... It seems that if we used a list that would not start from the bottom we would not have nearly as many issues... Mostly because the height of the list gets calculated and as you usually scroll down, the list height expands but you are left at the same scroll position (so nothing more than a little flicker in the scrollbar). However when the list is inverted and the elements above your overscan are rendered, the height of the elements pushes the elements that are in view downward (happens only when the estimate size is not 100% correct).
Furthermore, we have a functionality to scroll to the bottom of the list which we achieve by scrolling to a big offset. The reason for that is due to the padding at the bottom, scrollToIndex would not work for us. However since our estimate function is not 100% accurate the scroll happens as follow:
It seems that this is something inevitable, and that is why we have a double scroll in the scrollToIndex.
So I was wondering if anyone has ever done a reversed list with dynamic elements and could give some guidance, or create an example.
Beta Was this translation helpful? Give feedback.
All reactions