Need some help with Reverse endless scrolling

[badri21P]

I am trying to implement a reverse infinite scroll for chat and i was following this docs. The behavior that i want is whenever the user opens a chat it should show the last element(i.e bottom one) in scroll list, And that is what the demo in that doc show. But when i try to implement that it is not giving me the same, the current position is at top and not on bottom for me. I'll add some skeleton code that i have implemented. In short the scroll position should be at-last when i open, But it is at start. ` const [messages, setMessages] = useState([ { text: 'message 1' }, { text: 'message 2' }, { text: 'message 3' }, { text: 'message 4' }, { text: 'message 5' }, { text: 'message 6' }, { text: 'message 7' }, { text: 'message 8' }, { text: 'message 9' }, { text: 'message 10' }, ]); const START_INDEX = 0; const INITIAL_ITEM_COUNT = 10;

const [firstItemIndex, setFirstItemIndex] = useState(START_INDEX); return ( { messages.length > 0 ? <Virtuoso ref={virtuosoRef} style={{ height: 200, width: '100%' }} firstItemIndex={firstItemIndex} initialTopMostItemIndex={INITIAL_ITEM_COUNT - 1} data={messages} // startReached={loadMoreMessages} itemContent={(index, message) => } /> : null } ); ` When i one the chat this is what i am expecting.

But this is what i am getting

[petyosi]

I don't provide free support through Github issues. If you need help, support or request features, sponsor the project and contact me over email.

[ljs19923]

I think I have the same issue. Did you fix it @badri21P?

[akaravashkin]

Had the same when I put component into itemContent

itemContent={(index, data) => <MyComponent data={data} />}

When I wrapped it into div with padding (padding is important), it started to work. Why? I don't know. Just happy that found this and want to share.

itemContent={(index, data) => {
    return (
         <div style={{ padding: '5px' }}>
             <MyComponent data={data} />
         </div>
    );
}}

[idootop]

@akaravashkin Thanks for sharing your findings! After testing, I discovered that the issue stems from setting margins on the outermost element of the list items. This can lead to unexpected height calculations.

The div approach worked because it internalized the margin of the inner elements into padding on the outermost element, which is equivalent.

If you're using react-virtuoso and encountering issues like the list not scrolling to the bottom or jittery behavior during data loading, be sure to check if any margins are set on the outermost element of your list items.

Hope this helps! :)