How to avoid jump scrolling when adding new items to the list?

Question

JavaScript

I am developing a chat and need to implement the loading of old messages. When the user has scrolled to the top of the page, I request a new message block and insert it at the top of the list, then calculate how much space this new block has taken up and scroll down by that value. And during this process, you can notice a short jump in the list. How can this be avoided?

demo is here

Answer 1

Fix the maximum value of the scroll with the current filled place, then add content and update the value, if you don't twist, there will be no jump.