JSFiddle - React, Tailwind, and code Playground

by bitstarr

JavaScript

// infinite scrolling - sebastian laube
$.fn.Uinfinite = function( method ){
    // define some basics
    var target = this;
    var defaults = {
        buffer : 400, // number of pixels above the end of our container. at this position we start the action
        onLoad : 'loadNewRow' // call this function, when we reach the deadline
    };

    var settings = {};
    
    var methods = {
        // start the fun
        init : function( options, callback ) {
            // collect the settings and flaags, that we will use later
            settings = $.extend({}, defaults, options);
            settings.timer = 0;
            if (typeof callback == 'function') {
                settings.callback = callback;
            }

            // use this for every instance
            // @todo: not that good idea. limit to one instance!
            return this.each(function(){
               $(window).bind('scroll.Uinfinite', methods.scrollHandle);
            });
            
        },
        destroy : function( ) {
            return this.each(function(){
                $(window).unbind('.Uinfinite');
            })
        },
        calc : function() {
            // get some data about the view port, elements and the scrolling
            var parm = {};
            parm.viewTop = $(window).scrollTop();
            parm.viewBottom = (parm.viewTop + $(window).height());
            parm.containerBottom = Math.floor(
                target.offset().top +
                target.height()
            );
            // are we at the deadline yet?
            if ((parm.containerBottom - settings.buffer) <= parm.viewBottom) { return true; }
            else { return false; }
        },
        loadMore : function () {
            // do all the action - call the callback!
            if (methods.calc() === true) {
                settings.callback.call(target);
            }
        },
        scrollHandle : function() {
            // no need to stress. wait .2s after...