Загрузка данных

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Бесконечная прокрутка</title>
    <style>
        body {
            min-height: 2000px;
        }
    </style>
</head>
<body>
    <ul id="list"></ul>

    <script>
        let list = document.getElementById('list');
        let loading = false;
        let counter = 20;

        // Создаём первые 20 элементов
        for (let i = 1; i <= 20; i++) {
            let li = document.createElement('li');
            li.textContent = 'Элемент ' + i;
            list.appendChild(li);
        }

        // Функция добавления 5 элементов
        function addItems() {
            if (loading) return;
            loading = true;

            for (let i = 1; i <= 5; i++) {
                counter++;
                let li = document.createElement('li');
                li.textContent = 'Элемент ' + counter;
                list.appendChild(li);
            }

            loading = false;
        }

        // Проверка прокрутки до низа
        window.addEventListener('scroll', function() {
            let scrollTop = window.scrollY;
            let windowHeight = window.innerHeight;
            let documentHeight = document.documentElement.scrollHeight;

            if (scrollTop + windowHeight >= documentHeight - 10) {
                addItems();
            }
        });
    </script>
</body>
</html>