Scroll position when prepending elements - css

Question

I have a list of messages, when the user scroll to the top of the list, the app loads more messages. This part is working fine.
But the scroll position is kept unchanged, it's not scrolling to the previously shown element, the scroll position is always on top (so we could load more messages again).
This behavior happens only when user has scrolled to the very top. If we load more message but user has scroll down even a very little bit, it keeps the same position.
Is there a css solution ?
Or should I programmatically scroll down user to the previous message ?
Or should I programmatically scroll down a very little bit juste before adding messages to the list ?
function addElement(id) {
const $element = $($('#TemplateItem').html().replace('{id}', id));
$('.list').prepend($element);
}
var loadCount = 0;
function loadMore() {
loadCount++;
for(let i=0; i < 5; i++) {
addElement(loadCount + '-' + (i+1));
}
}
$('button').click(() => {
loadMore();
});
loadMore();
.list {
width: 50%;
height: 20rem;
background: yellow;
overflow-y: auto;
}
.item {
background: lime;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn btn-primary mt-3" type="button">
Load more
</button>
<div class="list mt-3 p-2"></div>
<template id="TemplateItem">
<div class="item mt-1 p-2">I am fantastic item #{id} !</div>
</template>
</div>

Answer 1

Refering to this answer, I have created my own solution.
Once the nodes has been added, update the scroll top of the container to the last node that existed before adding the new nodes.
Working example.
function addElement(id) {
const $element = $($('#TemplateItem').html().replace('{id}', id));
$element[0].id = `list-node-${id}`;
$('.list').prepend($element);
}
var loadCount = 0;
var incrementer = 5;
function loadMore() {
loadCount++;
for (let i = 0; i < incrementer; i++) {
addElement(loadCount + '-' + (i + 1));
}
if (loadCount > 1) {
initialNode = $(`#list-node-${loadCount - 1}-${incrementer}`);
$('#wrapper').animate({
scrollTop: initialNode.offset().top - $('#wrapper').offset().top + $('#wrapper').scrollTop()
}, 1000);
}
}
$('button').click(() => {
loadMore();
});
loadMore();
.list {
width: 50%;
height: 20rem;
background: yellow;
overflow-y: auto;
}
.item {
background: lime;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn btn-primary mt-3" type="button">
Load more
</button>
<div class="list mt-3 p-2" id="wrapper"></div>
<template id="TemplateItem">
<div class="item mt-1 p-2">I am fantastic item #{id} !</div>
</template>
</div>