startReached only ever gets called once?

[JamesReich]

Hey there. Having an issue with reversed infinite scroll in a chat app. Basically I'm using the startReached prop in reversed mode, and it only triggers once when scrolling to the top. After loading the first batch of messages, it never triggers again no matter how much I scroll up, I have literally restart the app to get it to trigger again.
I've put together a minimal reproduction here: https://codesandbox.io/p/sandbox/6tk29y

Steps to reproduce:

• Load the sandbox
• Scroll to the top of the messages
• First batch loads fine
• Keep scrolling up
• Notice startReached never triggers again

Expected behavior: startReached should trigger every time we scroll to the top and there are more messages to load. Similar to how endReached works. Replacing startReached with endReached in my application's code, it works exactly how I need it to, the only issue is I need it to trigger at the top of the scroll container and not the bottom.

Actual behavior: startReached only triggers once, then never again.

Any ideas what I might be doing wrong here? Let me know if you need any additional info!

[petyosi]

@JamesReich I highly recommend the message list component for chat interfaces. Its API is much more robust for this use case https://virtuoso.dev/virtuoso-message-list/tutorial/loading-older-messages/.

[JamesReich]

@petyosi How can we get a trial key? To make sure it's the right fit?

[JamesReich]

Also @petyosi I really think for our use case, the regular Virtuoso component seems to be working a lot better. Running into a lot of issues using the message list component. Is there no recommendation on getting the startReached to fire properly?

[JamesReich]

So probably not ideal but we went ahead and solved this by literally inverting our chat window and its children. Then endReached, which is working exactly how we need, is now the "top" of the window. Resulting in a proper reverse infinite scroll. This will work for our use case, your mileage may vary.

[chakri68]

Hey, I have a similar use case and I wanted to implement reverse scroll, you can share a snippet on how you did it?

[meeof]

"react-virtuoso": "^4.12.3"

import { useCallback, useEffect, useRef, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';

const Example = () => {
    const [elems, setElems] = useState<null[]>(new Array(10).fill(null));
    const scrollWrapperRef = useRef<HTMLDivElement | null>(null);

    const handleScrollerRef = useCallback((scrollWrapper: HTMLDivElement) => {
        scrollWrapperRef.current = scrollWrapper;
    }, []);

    const handleWheelInvert = useCallback((e: WheelEvent) => {
        e.preventDefault();
        scrollWrapperRef.current?.scrollTo({
            behavior: 'auto',
            top: scrollWrapperRef.current?.scrollTop - e.deltaY,
        });
    }, []);

    useEffect(() => {
        if (scrollWrapperRef.current) {
            scrollWrapperRef.current.addEventListener(
                'wheel',
                handleWheelInvert
            );
        }

        return () => {
            scrollWrapperRef.current?.removeEventListener(
                'wheel',
                handleWheelInvert
            );
        };
    });

    return (
        <div
            ref={scrollWrapperRef}
            style={{
                transform: 'scaleY(-1)', // very important
                width: '500px',
                height: '500px',
            }}
        >
            <Virtuoso
                data={elems}
                endReached={() => {
                    setElems([...elems, ...new Array(10).fill(null)]);
                }}
                itemContent={(index) => (
                    <div
                        style={{
                            transform: 'scaleY(-1)', // very important
                            backgroundColor: 'lightgray',
                            marginBottom: '10px',
                            display: 'flex',
                            justifyContent: 'center',
                        }}
                    >
                        elem {index}
                    </div>
                )}
                scrollerRef={
                    handleScrollerRef as (
                        ref: HTMLElement | Window | null
                    ) => never
                }
            ></Virtuoso>
        </div>
    );
};

export default Example;

[VincentLucht]

This worked for, much appreciated

[wolfcarves]

This works but auto scroll is reversed 😂 when you click the middle mouse button and drag it.