<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive with infinite scrolling</title>
   
    <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    
    <header class="bar bar-header bar-positive">
      <h1 class="title">Ionic Infinite Scroll with {{items.length}} items</h1>
    </header>

    <ion-content class="has-header">
    <ion-scroll  direction="x"  class="item wide-item">
        <div ng-repeat="item in items"  
            class="item" ng-click="goToPage({{item.id}})"
             style='display: inline-block; margin: 0; width:200px; height:200px'>
         
           <img src="{{item.src}}" width="180">
           <p>{{ $index }}. item {{ item.id }}</p>
           
        </div>
     
  
    </ion-scroll>
      
     <ion-infinite-scroll ng-if="!noMoreItemsAvailable" icon="ion-loading-c" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
    </ion-content>
      
  </body>
</html>
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicScrollDelegate) {

  $scope.noMoreItemsAvailable = false;

  $scope.loadMore = function() {
    debugger;
    var delegate = $ionicScrollDelegate.$getByHandle('myScroll');
    delegate.rememberScrollPosition('my-scroll-id');

    $scope.items.push({ id: $scope.items.length});

    if ( $scope.items.length > 99 ) {

      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
    $ionicScrollDelegate.resize();

  };

  $scope.items = [];

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.