Appending lazy-loaded elements to ul causes scrollTop to jump to zero

Question

I'm using waypoint.js library to detect when the user has scrolled to the bottom of the ul. this then triggers an axios call to my server, returning an html string. I am creating elements from this string using a template tag, removing some elements, and then appending these elements to the ul. The issue I keep running into occurs only on mobile devices. After I append these elements, and set the scrollTop to where the user was scrolled to before appending, the scroll bar jumps to the top.

I have tried using setTimeout() to stall the setting of scrollTop, which works, but you can see the scrollTop jump from 0 to the saved value which is very unsightly.

Container:

<ul id="container" style="overflow-y: scroll;" >
    {% include 'myapp/items.html' %}
</ul>

Items:

{% if content.has_previous %}
<li class="loadPrev" id="loadPrev-{{content.previous_page_number}}"  onclick="getPrevRows('{{ some_variable }}','{{ content.previous_page_number }}');">

</li>
{% endif%}

{% for item in content %}

<li> nested stuff </li>

{% endfor %}


{% if content.has_next %}

<li class="loadMore" id="loadMore-{{content.next_page_number}}"  onclick="getMoreRows('{{ bookdetails.url }}', '{{ content.next_page_number }}');">

</li>
{% endif %}

Javascript:

function getMoreRows(some_variable, page) {


    # destroy current waypoints so they dont get triggered again on append
    waypoint.destroyAll()


    axios.get(`my_view_url/?page=${page}`).then((res) => { 

        let container = document.getElementById('container');
        let template = document.createElement('template');
        template.innerHTML = res.data;

        let elements = template.content;
        let children = Array.from(container.children);
        let loadMoreLi = children[children.length - 1];
        let scrollTop = container.scrollTop;


        let loadPrevLink = elements.getElementById(`loadPrev-${Number(page) - 1}`);

        if (loadPrevLink) { 
            elements.removeChild(loadPrevLink)
        }

        container.append(elements); // append the returned html
        container.removeChild(loadMoreLi); 
        container.scrollTop = scrollTop;


        // create new waypoints with newly appended loadMore and loadPrev lis
        loadPrev = createLoadPrev();
        loadMore = createLoadMore();

    });
}