ngInfiniteScroll not working

Asked 30/11, 2015 at 17:55 Answered 11/10, 2016 at 12:49

Solved javascript angularjs infinite-scroll nginfinitescroll

I am trying to make ngInfiniteScroll work but in vain - Plunker. Scroll event is only triggered on page load, after that nothing seems to trigger it. Can anyone please shed some light.

I tried various combinations, none worked:

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'" 

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent

infinite-scroll='loadMore()' infinite-scroll-distance='2'

HTML:

<body ng-app="app" ng-controller="listController">
      <div id="list-wrapper">
          <div class="list" infinite-scroll='loadMore()' 
        infinite-scroll-distance='2' 
        infinite-scroll-container="'#list-wrapper'">
            <div class="header">

            </div>

            <div class="list-table" >
                <table class="table">
                    <tbody>
                        <tr ng-repeat="item in infiniteList">
                            <td style="width:100%">
                                <div>{{item}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style='clear: both;'></div>
            </div>
      </div>

JS:

var app = angular.module("app", ['infinite-scroll']);

app.controller('listController', ['$scope','$http', function ($scope,$http) {
    $scope.infiniteList = [];
    $scope.incr = 1;

    $scope.loadMore = function(){
      console.log("scroll");
        for(var i = 0; i< 30; i++){
            $scope.infiniteList.push("Item " + $scope.incr);
            $scope.incr +=1;
        }
    };

}]);

Vinasse answered 30/11, 2015 at 17:55 Comment(0)

EDIT: you are using the latest stable version of ngInfinite Scroll, which does not have the -container and -parent methods, i have update the plunker with the develpoment ngInfiniteScroll.js, now you can see the working code here:

http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview

OLD:

ngInfiniteScroll will call myPagingFunction() any time the bottom of the element approaches the bottom of the browser window

so, if you change your css and remove the max-height, so that the list covers the page,you will see that the infinitescroll is working when user scrolls past the page.

#list-wrapper{
    //max-height: 400px;
    overflow-y: scroll;

    margin-top: 20px;
    border: solid 1px black;
}

http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview

also see: angularjs infinite scroll in a container

Thoria answered 30/11, 2015 at 18:56 Comment(1)

I had some trouble with this issue, I didn't even check the version number, cause I have gotten the js files from nuget, so I supposed they were the latest version, but they were from 2013. changing the file content with the latest code, and changing as in your example fixed the issue – Rainwater 20/10, 2016 at 15:34

Check your MAIN HTML or body tag. They might be containing some overflow css. So the page scroll must be the wrapper in that case.

body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}

and

    <div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy'
     infinite-scroll-distance='0'
     infinite-scroll-container="'body'">

This saved my day.

Pallaton answered 12/8, 2016 at 23:0 Comment(0)

You can checkout the 1.3.0 version, which performs a check for "infinite-scroll-parent".

If you are using bower: bower install --save ngInfiniteScroll#1.3.0

<div class="scroll-container"> <!-- Fixed height is OK -->
    <div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true">

Helainehelali answered 11/10, 2016 at 12:49 Comment(0)

Recommended topics

Hot tags