Wednesday, March 30, 2016

RxJS Polling for row updates on infinite scroll

By Hường Hana 10:00 AM , , , , Leave a Comment

I was watching Matthew Podwysocki event on https://www.youtube.com/watch?v=zlERo_JMGCw 29:38

Where he explains how they solved scroll on netflix. Where user scroll for more data as previous data gets cleaned up and more adds up (but scroll back shows previous data again).

I wanted to do similar, but I grabbed netflix demo code: 

function getRowUpdates(row) {   var scrolls = Rx.Observable.fromEvent(document, 'scroll');   var rowVisibilities =      scrolls.throttle(50)       .map(function(scrollEvent) {         return row.isVisible(scrollEvent.offset);       })       .distinctUntilChanged();    var rowShows = rowrowVisibilities.filter(function(v) {     return v;   });   var rowHides = rowrowVisibilities.filter(function(v) {     return !v;   });    return rowShows     .flatMap(Rx.Observable.interval(10))     .flatMap(function() {       return row.getRowData().takeUntil(rowHides);     })     .toArray(); }

But I'm bit confused on how to pass new data or page data according to the scroll here.. Can someone give little explanation on how I can do the following:

  • fetch first list (I can do that)
  • fetch more list as user scroll down (using paging next page)
  • remove previous fetched data from memory, and refetch on request (scroll up).

1 Answers

Answers 1

Here is how I would do it in general lines. If this seems to give you satisfaction, I'll edit and add more details.

  1. Add a DIV or any desired tag that will be the location for this dynamic list.
  2. Each page of the list will be contained in another DIV which can contains anything. A page (to simplify next steps) will be the height of the window.
  3. Load 3 pages that covers, in all, three times the window height.
  4. When scrolling down and page1 is not visible (so page2.top is at window.top), add another below : page4. Still scrolling down, if page2 is not visible, put page1.height in a variable, remove the page1 from DOM and adjust scroll position by removing page1.height. Also, load page5.
  5. So now, there is page2 to page5 in the page which page2 and page5 are not visible. If page3 is fully visible, than page4 is not, otherwise a part of page3 and page4 are visible.
  6. When scrolling up and page2 is starting to be visible, load page1, add page1.height to scroll position and remove page5.
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment