How to create infinite inverted scroll for chat?

Question

JavaScript

I ran into a problem
. I have an initially loaded list of messages in a scrollable block, when scrolling up, when the user reaches the top of the list, the messages are loaded and they are added to the top of the chat, and here is the problem: the scroll remains at the top of the scrollable area, and not in the place where the user has stopped.
Briefly , how to implement scrolling and loading messages as in VK, telegram?

Answer 1

The easiest option. Remember the very first block before loading, after loading, take the position from this block relative to the parent, and scroll the parent to this position.
UPD: another way. Before adding messages, you calculate the height of the scroll-area of ​​the element, and after adding messages, subtract the old one from the new height of the scroll-area of ​​the block with messages, and this value is scrollY