[BUG] Unable to scroll to absolute bottom if there is a footer with position: sticky about react-virtuoso HOT 9 CLOSED

The Virtuoso component does not anticipate a sticky footer element. I see that you're building a chat interface. I strongly recommend you use the VirtuosoMessageList for that purpose - it solves quite a few specifics of the chat interface, including a dedicated sticky footer component.

from react-virtuoso.

I see, thanks for the reply, VirtuosoMessageList will solve the issues I face above?
is there a monthly subscription pricing instead of a full year subscription? the pricing seems little expensive

from react-virtuoso.

Yes, the scrolling API of the message list takes into account the sizing of the sticky elements.
The pricing is yearly based. A monthly subscription does not make sense for that kind of offering.

from react-virtuoso.

why is it that in Virtuoso Message List the message data is stored in a ref instead of a reactState? this seems to make it more difficult to manage, unlike Virtuoso which I can just modify (add /remove) from the state array directly

from react-virtuoso.

This section of the docs explains it.

In the case of the message list, an updated data prop may have different underlying reasons - new incoming messages, older messages being loaded, or existing messages being updated (for example, someone liked a message). Reverse-engineering the intent from the data set is not always possible, and it's not always clear how the scroll position should be adjusted. The imperative API gives you the necessary control over the scroll position adjustment that the current data set change should cause.

from react-virtuoso.

Then what should I do with the <VirtuosoMessageList /> initialData={} when I clicked the load More button to load older messages? prepend() to the ref? append to the ref? does the ref even hold the initialData anymore? or do I manually prepend / append to it?

are prepend and append the only options? cant I just do something like:

ref.current?.data = messages

?

previously all I need to do is just:

setMessages([...response_messages, ...messages]);

in the fetchMessages() async axios call

from react-virtuoso.

Follow the tutorial. It covers exactly this - the initial load data and several additional common scenarios.

from react-virtuoso.

the complete live example do not even show the complete code, imports etc, why not just use codesandbox instead?

while the virtuoso tutorial is easily understandable

the virtuoso mesasge list is a mix of javascript and .tsx?

from react-virtuoso.

I'm sorry for wasting your time. It looks like the product and my suggestions do not work for you. Good luck finding a solution that fits your requirements.

from react-virtuoso.