Javascript 将延迟加载的元素附加到ul会导致scrollTop跳转到零

我正在使用waypoint.js库检测用户何时滚动到页面底部。然后触发对我的服务器的axios调用，返回html字符串。我使用模板标记从这个字符串创建元素，删除一些元素，然后将这些元素附加到ul。我经常遇到的问题只发生在移动设备上。在添加这些元素并将scrollTop设置为用户在添加之前滚动到的位置后，滚动条跳到顶部

我曾尝试使用setTimeout（）暂停scrollTop的设置，这很有效，但您可以看到scrollTop从0跳转到保存的值，这非常难看

容器：

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

{% 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 %}

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();

    });
}