title: How to implement Infinite Scrolling with the new Firebase (2016)?
body: <p><strong>QUESTION:</strong></p>
  
  <p>How to implement efficient infinite scrolling in Firebase using javascript (and node.js) ?</p>
  
  <hr>
  
  <p><strong>WHAT I CHECKED:</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/35098894/implementing-infinite-scrolling-with-firebase">Implementing Infinite Scrolling with Firebase?</a></p>
  
  <p>Problem: older firebase ^</p>
  
  <p><a href="https://stackoverflow.com/questions/22868604/infinite-scroll-with-angularjs-and-firebase">Infinite scroll with AngularJs and Firebase</a></p>
  
  <hr>
  
  <p><strong>CODE FROM: 
  <a href="https://stackoverflow.com/questions/22868604/infinite-scroll-with-angularjs-and-firebase">Infinite scroll with AngularJs and Firebase</a></strong></p>
  
  <p>"First, I recommend to create an Index in your Firebase. For this answer, I create this one:</p>
  
  <pre><code>{
     "rules": {
        ".read": true,
        ".write": false,
        "messages": {
           ".indexOn": "id"
        }
     }
  }
  </code></pre>
  
  <p>Then, let's make some magic with Firebase:</p>
  
  <pre><code>// @fb: your Firebase.
  // @data: messages, users, products... the dataset you want to do something with.
  // @_start: min ID where you want to start fetching your data.
  // @_end: max ID where you want to start fetching your data.
  // @_n: Step size. In other words, how much data you want to fetch from Firebase.
  var fb = new Firebase('https://&lt;YOUR-FIREBASE-APP&gt;.firebaseio.com/');
  var data = [];
  var _start = 0;
  var _end = 9;
  var _n = 10;
  var getDataset = function() {
     fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {
        data.push(dataSnapshot.val());
     });
     _start = _start + _n;
     _end = _end + _n;
  }
  </code></pre>
  
  <p>Finally, a better Infinite Scrolling (without jQuery):</p>
  
  <pre><code>window.addEventListener('scroll', function() {
    if (window.scrollY === document.body.scrollHeight - window.innerHeight) {
       getDataset();
    } 
  });
  </code></pre>
  
  <p>I'm using this approach with React and it's blazing fast no matter how big your data is."</p>
  
  <p>(answered Oct 26 '15 at 15:02)  </p>
  
  <p>(by Jobsamuel)</p>
  
  <hr>
  
  <p><strong>PROBLEM</strong></p>
  
  <p>In that solution, n posts will be loaded each time the scroll reaches the end of the height of screen.</p>
  
  <p>Depending on screen sizes, this means a lot more posts than needed will be loaded at some point (the screen height only contains 2 posts, which means 3 more posts than necessary will be loaded each time we reach the end of the screen height when n = 5 for example).</p>
  
  <p>Which means <code>3*NumberOfTimesScrollHeightHasBeenPassed</code> more posts than needed will be loaded each time we reach the end of the scrollheight.</p>
  
  <hr>
  
  <p><strong>MY CURRENT CODE (loads all posts at once, no infinite scrolling):</strong></p>
  
  <pre><code>var express = require("express");
  var router = express.Router();
  
  var firebase = require("firebase");
  
  router.get('/index', function(req, res, next) {
  
      var pageRef = firebase.database().ref("posts/page");
  
      pageRef.once('value', function(snapshot){
          var page = [];
          global.page_name = "page";
          snapshot.forEach(function(childSnapshot){
              var key = childSnapshot.key;
              var childData = childSnapshot.val();
              page.push({
                  id: key,
                  title: childData.title,
                  image: childData.image
              });
          });
          res.render('page/index',{page: page});
      });
  });
  </code></pre>