I am trying to achieve infinite scrolling it works okay until i render parent by manually , but i need to achieve reactivity when scrolled to bottom .How to achieve this ?
Scrolling code in Template.icons.onRendered :
$(function(){
function onSelectScroll(event) {
var st = $(selectObj).scrollTop();
var loadedItems = $(selectObj[0]).find('li').length;
var curSHeight = event.currentTarget.scrollHeight;
var curSTop = event.currentTarget.scrollTop;
var curHeight = $(event.currentTarget).height();
console.log("csH: " + curSHeight + " csT: "+curSTop + " cH: "+ curHeight + " len:"+loadedItems);
//downscroll
if((curSHeight - 50 <= curSTop + curHeight)){
if (st > lastScrollTop && loadedItems-1 === Session.get("iconsLimit")) {
currentPageNo++;
Session.set("iconsLimit",Session.get("iconsLimit") + 20);
console.log("current Page " + currentPageNo);
isDataAvailable = false;
self.noIconsRender.set(self.noIconsRender.get()-1);
}
else {
// upscroll code
}
lastScrollTop = st;
}
}
}); // self invoking function end
Child template :
<template name="icons">
<i class="material-icons"> <span class="iconsclass">{{this.icon}}</span></i>
<select class="iconsSelect" id="icons" name="icon">
<option value="tab" data-id="tab"> {{this.icon}} </option>
{{#each icons}}
<option value="{{this.icon}}" data-id={{this.icon}}><i class="material-icons">{{this.icon}}</i></option>
{{/each}}
</select>
<!--{{#if moreResults}}
<div id="showMoreResults" style="background-color: red;margin-left: 25px;"> <span class="loading">Loading...</span> </div>
{{/if}} -->