JSFiddle - React, Tailwind, and code Playground

by johnsonjo4531

HTML

<button class="js-refresh">refresh</button>
<div id="feed" class="feed"></div>
<div id="feed2" class="feed"></div>

CSS

/* Styles go here */
.tweet {
    padding: 50px;
    background-color: #ccc;
    margin-top: 10px;
}

.feed {
    height: 500px;
    overflow-y: scroll;
    margin: 10px 0;
}

JavaScript

// Code goes here
function infiniteScroll (options) {
    var defaultOptions = {
        binder: $(window), // parent scrollable element
        loadSpot: 300, //
        feedContainer: $("#feed"), // container
        cb: function () { },
    }
    
    options = $.extend(defaultOptions, options);
    options.shouldLoad = true;
    
    var returnedOptions = {
        setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
    };
    
    function scrollHandler () { 
        var scrollTop = options.binder.scrollTop();
        var height = options.binder[0].innerHeight || options.binder.height();
        if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
            options.shouldLoad = false;
            if(typeof options.cb === "function") {
                new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
                    options.shouldLoad = isNotFinished;
                });
            }
        }
    }
    
    options.binder.scroll(scrollHandler);
    
    scrollHandler();
    
    return returnedOptions;
    
}

function tweetLoader () {
  var amountLoaded = 0;
  var numToLoad = 10;
  var maxLoad = 100;
  
  function loadTweets ($el) {
      if(amountLoaded !== maxLoad) {
          var lastLoadIndex = Math.min(maxLoad, amountLoaded + numToLoad);
          for(var i = amountLoaded; i < lastLoadIndex; ++i) {
              addTweet($el, i);
          }
          amountLoaded = lastLoadIndex; 
          return true;
      } else {
          return false;
      }
  }
  
  function addTweet ($el, i) {
      $el.append('<div class="tweet">Tweet #' + (i + 1) + '</div>');    
  }
    
  return {
    addTweet: addTweet,
    loadTweets: loadTweets,
    resetAmountLoaded: function () { amountLoaded = 0 }
  }
}

function initScroller(str) {
  var tl = tweetLoader();
  var infScroll =...