Shyamal Parikh Shyamal Parikh - 1 year ago 163
Javascript Question

ngInfiniteScroll not working

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'


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


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


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

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

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


Answer Source

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:


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.

    //max-height: 400px;
    overflow-y: scroll;

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

also see: angularjs infinite scroll in a container

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download