Добавление ленивых элементов к ul приводит к тому, что scrollTop переходит на ноль

Question

Я использую библиотеку waypoint.js, чтобы определить, когда пользователь прокрутил до конца ul.это тогда вызывает вызов 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 %}

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

    });
}