Добавление ленивых элементов к 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();

    });
}