Endless Scroll with AngularJs and Firebase

Question

How do you implement endless scrolling of the data you receive from firebase. So far I have found the angularjs directive which works very well, but it is difficult for me to implement it with fireable, since firebase returns all the data in one request and this is not what I want.

Answer 1

A few weeks ago, I created a JS function that allowed me to scroll endlessly in my application .

First, when a user visits a website, a data set is displayed:

// Add a callback that is triggered for each message. var n = 25; // Step size for messages display. $(window).load(function() { lastMessagesQuery = messagesRef.limit(n); lastMessagesQuery.on('child_added', function (snapshot) { var message = snapshot.val(); $('<div/>').text(message.text).prependTo($('#messagesDiv')); $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight; }); $('#messagesDiv').fadeTo(1000, 1); }); 

Then a function that makes infinite scroll possible:

 // Pagination. var i = 0; // Record variable. function moreMessages () { i += n; // Record pagination updates. moreMessagesQuery = messagesRef; // Firebase reference. moreMessagesQuery.on('value', function (snapshot) { var data = snapshot.exportVal(); // Fetch all data from Firebase as an Object. var keys = Object.keys(data).reverse(); // Due to the Keys are ordered from the oldest to the newest, it nessesary to change its sequence in order to display Firebase data snapshots properly. var total_keys = Object.keys(data).length; var k = keys[i]; // Key from where to start counting. Be careful what Key you pick. if (i < total_keys) { // Stop displaying messages when it reach the last one. lastMessagesQuery = messagesRef.endAt(null, k).limit(n); // Messages from a Key to the oldest. lastMessagesQuery.on('child_added', function (snapshot) { var message = snapshot.val(); $('<div/>').text(message.text).appendTo($('#messagesDiv')).hide().fadeIn(1000); // Add set of messages (from the oldest to the newest) at the end of #messagesDiv. }); } }); } 

Finally, endless scrolling:

 // Load more messages when scroll reach the bottom. $(window).scroll(function() { if (window.scrollY == document.body.scrollHeight - window.innerHeight) { moreMessages(); } }); 

It works great with small datasets. Hope this helps you solve your problem (or gives you more ideas).

---

UPDATE October 2015

Firebase has been growing since my initial answer, which means that it is now quite easy to achieve infinite scrolling using only the Javascript API :

First, I recommend creating an index in your Firebase. For this answer, I create this:

 { "rules": { ".read": true, ".write": false, "messages": { ".indexOn": "id" } } } 

Then do the magic with Firebase:

 // @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://<YOUR-FIREBASE-APP>.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; } 

Finally, the best infinite scroll (without jQuery):

 window.addEventListener('scroll', function() { if (window.scrollY === document.body.scrollHeight - window.innerHeight) { getDataset(); } }); 

I use this approach with React and it flashes quickly no matter how big your data is.