JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0rc.js"></script>
<script src="https://s3.amazonaws.com/github-raw/infinitescroll.js"></script>
<body style="width: 100%; height: 100%; font-family: Sans-serif;">
    <p style="font-size: 0.8em; color: #696969; font-style: italic;">
        example of 
        <a href="https://github.com/thinkloop/knockout-js-infinite-scroll" style="color: #292929; text-decoration:none;">knockout-js-infinite-scroll</a>
        <br />
        developed for
        <a href="http://www.oppositeofopposite.com/" style="color: #292929; text-decoration:none;">OppositeofOpposite.com</a>
    </p>
        
    <div>
        <strong>Total items:</strong>
        <span data-bind="text: items().length"></span>
        <br />
        <strong>Display items:</strong>
        <span data-bind="text: items.infinitescroll.numItemsPerPage()"></span>
        <br />
        <strong>Rendered items:</strong>
        <span data-bind="text: items.infinitescroll.displayItems().length - items.infinitescroll.firstHiddenIndex()"></span>
        <br />
    </div><br />
        
    <div>
        <strong>Num items per page:</strong>
        <span data-bind="text: items.infinitescroll.numItemsPerPage()"></span>
        <br />
        <strong>First visible item index:</strong>
        <span data-bind="text: items.infinitescroll.firstVisibleIndex()"></span>
        <br />
        <strong>Last visible item index:</strong>
        <span data-bind="text: items.infinitescroll.lastVisibleIndex()"></span>
    </div><br />
        
    <div style="font-size: 0.8em;">
        <strong>container w/h: </strong>
        <span data-bind="text: items.infinitescroll.viewportWidth() + 'px / ' + items.infinitescroll.viewportHeight() + 'px'"></span>
        <br />
        <strong>each item w/h: </strong>
        <span data-bind="text: items.infinitescroll.itemWidth() + 'px / ' + items.infinitescroll.itemHeight() + 'px'"></span>
    </div>   
    
	<ul id="itemsUL"...

JavaScript

// knockout-js-infinite-scroll (common usage)
ViewModel = function () {
    var self = this;

    self.items = ko.observableArray();
    self.items.extend({
        infinitescroll: {}
    });

    // detect resize
    $(window).resize(function() {
        updateViewportDimensions();
    });

    // tell infinte-scroll about the current scroll position
    // (debounce is important for ie11 smooth scroll problems! and also generally nicer in all browsers)
    $('#itemsUL').scroll(function() {        
       self.items.infinitescroll.scrollY($('#itemsUL').scrollTop());
        
        // add more items if scroll reaches the last 100 items
        if (self.items.peek().length - self.items.infinitescroll.lastVisibleIndex.peek() <= 100) {
            populateItems(100);
        }
    });

    // update dimensions of infinite-scroll viewport and item
    function updateViewportDimensions() {
        var itemsRef = $('#itemsUL'),
            itemRef = $('.item').first(),
            itemsWidth = 240,
            itemsHeight = 300,
            itemWidth = 220,
            itemHeight = 20;

        self.items.infinitescroll.viewportWidth(itemsWidth);
        self.items.infinitescroll.viewportHeight(itemsHeight);
        self.items.infinitescroll.itemWidth(itemWidth);
        self.items.infinitescroll.itemHeight(itemHeight);

    }
    updateViewportDimensions();

    // init items
    function populateItems(numTotal) {
        var existingItems = self.items(),
            item = '',
            alphabet = 'abcdefghijklmnopqrstuvwxyz',
            numTotal = numTotal || 500;

        for (var i = 0; i < numTotal; i++) {
            item = '';
            for( var j = 0; j < Math.floor(Math.random() * 20) + 1; j++ ) {
                item += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
            }
            existingItems.push(item);
        }
        self.items(existingItems);
    }
    populateItems();
}

ko.applyBindings(new ViewModel());