Scroll position when new items are unshifted. Reversed followOutput ?

[misha-erm]

Hello

I'm building a feed component to which new items are added on top. Right now I struggle with scroll position when new item arrives. When user scrolled a bit down I want to keep the same item visible after new items were added. After reading through docs this remind me of default behaviour for 'followOutput' but reversed. Is there something like this?

Thank you in advance for any tips

[petyosi]

That's called prepending items. react-virtuoso makes this possible through the firstItemIndex prop, which is kind of convoluted and causes complications. The message list component makes that much easier.

[misha-erm]

thank you, will check it 🙇🏻

For now I was able to hack something that "works" using totalListHeightChanged and scrollTop property of scroll parent

[kaiofelipejs]

thank you, will check it 🙇🏻

For now I was able to hack something that "works" using totalListHeightChanged and scrollTop property of scroll parent

@misha-erm do you can share a example with this hack?

[misha-erm]

@kaiofelipejs sorry for late reply.

It looks like this:

const scrollLockRef = useRef(false);

const prepend = (v) => {
    scrollLockRef.current = true;
  };

useImperativeHandle(feedRef, () => ({
    prepend,
    ...ref.current!,
  }));

const isWindowScroll = scrollParent === document.scrollingElement;

  const listHeight = useRef(0);

// ...

return (<Virtuoso
        ref={composedRef}
        {...props}
        style={{ ...style, ...props.style }}
        restoreStateFrom={restoreStateFrom}
        atTopStateChange={atTopStateChange}
        useWindowScroll={isWindowScroll}
        itemContent={itemContentWithGap}
        totalListHeightChanged={(height) => {
          // hack to keep scroll position on same item after prepend
          if (scrollParent) {
            if (scrollLockRef.current) {
              const delta = height - listHeight.current + Number(gap);

              scrollParent.scrollTop += delta;
            }
          }
          scrollLockRef.current = false;
          listHeight.current = height;
          totalListHeightChanged?.(height);
        }}
        customScrollParent={(!isWindowScroll && scrollParent) || undefined}
        increaseViewportBy={increaseViewportBy}
      />)

So when new items arrive, I call feed.prepend() which auto scroll parent after height is changed

[wolfcarves]

I've been looking for a solution for a while now and never found good source 🤦