CODEWITHSUNDEEP
javascriptangularjsinfinite-scrollnginfinitescroll
pyramidface
pyramidface

Reputation: 1287

AngularJS ngInfiniteScroll keeps firing as I scroll up

My upwards scrolling triggers my infiniteSubjects(). But it should only trigger it while scrolling downward. I've already looked into many posts but haven't figured out a solution. I've tried messing around with infinite-scroll-disabled. Also tried sticking a 1003px height <div> in different places at the bottom to take up space. No dice. :/

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

Inside my controller:

$scope.infiniteSubjects = function() {
    console.log("scrolling");
    $scope.subjectLimit += 1;
};

I've also gone inside ng-infinite-scroll.js file to see what the heights were as it was 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:

WINDOWBOTTOM 1194
ELEMENT BOTTOM 1194
REMAINING 0

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

As I scroll down, my remaining will increment by -100 As I scroll up, my remaining will increment by 100, but it never becomes positive since the page starts at 0

Upvotes: 3

Views: 1565

Answers (1)

pyramidface
pyramidface

Reputation: 1287

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

All I needed to do was specify <!DOCTYPE html> at the top of my html.

Upvotes: 2

Related Questions