When I scroll upwards, it triggers my infiniteSubjects() function. However, I only want it to trigger while scrolling downward. I've searched through various posts but haven't found a solution yet. I've tried using the infinite-scroll-disabled attribute and even inserting a 1003px height <div> at different places at the bottom to occupy space. Unfortunately, none of these attempts have worked.
<div ng-app="mainApp" ng-controller="gridController" class="container">
<div class="row" infinite-scroll="infiniteSubjects()" infinite-scroll-distance="0" >
<div ng-repeat="subject in (filteredSubjects = (allSubjects | orderBy:subjectOrder | limitTo:subjectLimit))">
<div class="col-md-2 subject-card">
{{ subject.name }}
..more divs go here..
</div>
</div>
<div style="clear:both; height:1003px;"> </div>
</div>
</div>
In my controller:
$scope.infiniteSubjects = function() {
console.log("scrolling");
$scope.subjectLimit += 1;
};
I also checked the ng-infinite-scroll.js file to monitor the heights while scrolling by adding some console.logs
windowBottom = $window.height() + $window.scrollTop();
console.log("WINDOWBOTTOM " + windowBottom);
elementBottom = elem.offset().top + elem.height();
console.log("ELEMENT BOTTOM" + elementBottom);
remaining = elementBottom - windowBottom;
console.log("REMAINING" + remaining);
Upon page load:
WINDOWBOTTOM 1194
ELEMENT BOTTOM 1194
REMAINING 0
The fact that window bottom and element bottom are initially the same is puzzling. Why is this happening?
While scrolling down, the value of remaining decreases by 100. Conversely, when scrolling up, it increases by 100, although it never becomes positive since the initial value is 0.