Infinite Scrolling with Meteor

Question

I try to load 12 elements only every time until the user scrolls all the way down and loads 12 more elements

For some reason, my code is not working. When I load another item, I can see it in the admin panel so that it is loaded successfully, but I do not see it in the normal user view. I can only view the first 12 loaded items and no longer load items when scrolling.

Here is my client side code

if (Meteor.isClient) {

    var ITEMS_INCREMENT = 12; //this one refers to the number of elements to load
    Session.setDefault('itemsLimit', ITEMS_INCREMENT);
    Deps.autorun(function() {
        Meteor.subscribe('items', Session.get('itemsLimit'));
    });

    Template.list_products.helpers({
        applications: function () {
            var limit = Session.get("itemsLimit");

            //return Products.find({}, { sort: {createdAt: -1},limit: limit }); // render latest first

            return Products.find({}, { sort: {createdAt: 1},limit: limit }); // render first first
        }
    });

    Template.list_products.moreResults = function() {
        // If, once the subscription is ready, we have less rows than we
        // asked for, we've got all the rows in the collection.
        return Products.find({}, { sort: {createdAt: -1},limit: limit });
    }

    // whenever #showMoreResults becomes visible, retrieve more results
    function showMoreVisible() {
        var threshold, target = $("#showMoreResults");
        if (!target.length) return;

        threshold = $(window).scrollTop() + $(window).height() - target.height();

        if (target.offset().top < threshold) {
            if (!target.data("visible")) {
                // console.log("target became visible (inside viewable area)");
                target.data("visible", true);
                Session.set("itemsLimit",
                    Session.get("itemsLimit") + ITEMS_INCREMENT);
            }
        } else {
            if (target.data("visible")) {
                // console.log("target became invisible (below viewable arae)");
                target.data("visible", false);
            }
        }
    }

    // The below line is to run the above func every time the user scrolls
    $(window).scroll(showMoreVisible);
}

Answer 1

Here is how I solved it:

if(Meteor.isClient) {
  Session.set("itemsLimit", 9); // to set the limit to 9

  lastScrollTop = 0;

  $(window).scroll(function(event){
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { // to detect scroll event
      var scrollTop = $(this).scrollTop();

      if(scrollTop > lastScrollTop){ // detect scroll down
        Session.set("itemsLimit", Session.get("itemsLimit") + 9); // when it reaches the end, add another 9 elements
      }

      lastScrollTop = scrollTop;
    }
  });
}

Now it works like a charm :)

Answer 2

You can implement it as follows:

HTML:

<template name="yourTemplateName">
   <div id="divId">
      {{#each dataArr}}
         //your view here.
      {{/each}}
   </div>
  {{#if noMoreItem}}
  <span>No more items to show</span>
  {{/if}}
</template>

JS:

var pageNumber = new ReactiveVar(0);
var noMoreItem = new ReactiveVar(false);
var mainContainer = // Your element here example: document.getElementById('divId')
mainContainer.addEventListener('scroll', function(){
    if(mainContainer.scrollHeight - mainContainer.scrollTop === mainContainer.clientHeight) {
        getMoreItems();
    }
});
var getMoreItems = function () {
   if(pageNumber.get() < Math.floor(Counts.get('countItems')/12)) {
      pageNumber.set(Number(pageNumber.get())+1);
      Meteor.subscribe('pubName', pageNumber.get(), 12);
  } else {
     noMoreItem.set(true);
  }
}

Template.yourTemplateName.rendered = function () {
   pageNumber.set(0);
   Meteor.subscribe('pubName', pageNumber.get(), 12);
}

Template.yourTemplateName.helpers({
   'dataArr': function () {
      return CollectionName.find();
   },
  'noMoreItem': function () {
      return noMoreItem.get();
   }
})

:

Meteor.publish("pubName", function (pageNumber, pageSize) {
   Counts.publish(this, 'countItems', Meteor.users.find(filter), {
      noReady: true
   });
   return CollectionName.find({}, {
      skip: pageNumber > 0 ? ((pageNumber) * pageSize) : 0,
      limit: pageSize
   })
});