stern-brocot.cc

.every-possible-fraction {
    width: 100%;
    overflow: hidden;
}

.every-possible-fraction-container {
    font-family: monospace;
    display: flex;
    min-width: 100%;
    margin: 0 -5px;
    flex-wrap: wrap;
    justify-content: space-between;
    &:after {
        content: "";
        flex: auto;
    }
}

.every-possible-fraction .f {
    display: block;
    text-align: center;
    min-width: 30px;
    margin: 5px;
}

.every-possible-fraction .n,
.every-possible-fraction .d {
  display: block;
  padding: 0 3px;
}

.every-possible-fraction .n {
  border-bottom: 1px solid #000;
}

stern-brocot.js

(function() {
    let numbers = [1, 1];

    const addSternBrocot = (seq, n) => {
        const n1 = seq[seq.length / 2 - 1];
        const n2 = seq[seq.length / 2];
        const next = seq.concat(n1 + n2, n2);
        return --n ? addSternBrocot(next, n) : next;
    };

    const render = function(arr) {
        var fragment = document.createDocumentFragment();
        for (var i = 0; i < arr.length - 1; i++) {
            var span = document.createElement("span");
            span.className = "f";
            span.innerHTML =
                "<span class='n'>" +
                arr[i] +
                "</span><span class='d'>" +
                arr[i + 1] +
                "</span>";
            fragment.appendChild(span);
            fragment.appendChild(document.createTextNode(" "));
        }
        document
            .getElementById("every-possible-fraction-container")
            .appendChild(fragment);
    };

    const handleScroll = function() {
        if (document.getElementById("every-possible-fraction-container")) {
            var doc = document.documentElement;
            var top =
                (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

            if (document.body.offsetHeight - top < doc.clientHeight * 3) {
                numbers = addSternBrocot(numbers, 300);
                render(numbers.slice(numbers.length - 300, numbers.length));
            }
        } else {
            window.removeEventListener("scroll", handleScroll);
        }
    };

    numbers = addSternBrocot(numbers, 100);
    render(numbers);
    window.addEventListener("scroll", handleScroll);

})();