AngularJS ngInfiniteScroll keeps firing when I view

My scroll to the top launches mine infiniteSubjects()

. But this should only work when scrolling down. I have already looked at many posts but did not understand the solution. I've tried chatting with infinite-scroll-disabled

. Also tried sticking the 1003px height <div>

in different places at the bottom to take place. No cubes.: /

<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">
                {{ }}
             ..more divs in here..
    <div style="clear:both; height:1003px;"> </div>


Inside my controller:

$scope.infiniteSubjects = function() {
    $scope.subjectLimit += 1;


I also ended up in the ng-infinite-scroll.js

file to see what heights were like 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);


When the page loads:



I don't think the bottom of the window and the bottom of the element should be the same. Why are they like this?

When I scroll down mine remaining

will increase by -100

When I scroll up mine remaining

will increase by 100

, but it never becomes positive since the page starts at 0


source to share

1 answer

After digging some more SO, I came across another person's answer on a similar post: ngInfiniteScroll - the loadMore () method is called on every mouse scroll

All I had to do was point <!DOCTYPE html>

at the top of my html.



All Articles