body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.list-wrapper {
    display: flex;
    justify-content: center;
}

.list {
    max-width: 400px;
    margin: 20px;
    flex: 1;
    height: 600px;
    overflow: auto;
}

.list-item {
    height: 6rem;
    border-radius: 11px;
    background-color: beige;
    margin: 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

var currentItem = 1
const loadMoreItens = () => {
    const list = document.getElementById('list')
    for (let i = 0; i < 11; i++) {
        const item = document.createElement("article")
        item.className = 'list-item'
        item.innerHTML = `Item list ${currentItem++}`
        list.appendChild(item)
    }
}

const handleInfiniteScroll = (el) => {
    const element = el.srcElement;
    if ((element.offsetHeight + Math.ceil(element.scrollTop)) >= element.scrollHeight) {
        loadMoreItens()
    }
}

window.onload = () => {
    (document.getElementById('list')).onscroll = (el) => handleInfiniteScroll(el)
    loadMoreItens();
}