JSFiddle - React, Tailwind, and code Playground

by TheBanana

HTML

<div id="list">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
</div>

CSS

#list {
    width: 200px;
    height: 100px;
    overflow: auto;
}

JavaScript

document.getElementById('list').addEventListener('wheel', function () {
    function load() {
        var fragment = document.createDocumentFragment();

        for (var i = 0; i < 10; i++) {
            var p = document.createElement('p');
            p.appendChild(document.createTextNode(i));
            fragment.appendChild(p);
        }
        return fragment;

    }
    var myList = document.getElementById('list');
    if (myList.scrollTop + myList.offsetHeight == myList.scrollHeight) {
        this.appendChild(load());
    }
}, false);