ionic-framework: bug: Infinite scroll not working when ion-scroll on page

Type: bug

Platform: all

ion-infinite-scroll seems to have issues when ion-scroll is right above a list. It works intermittently or not at all.

If you scroll right to the bottom of the list, it will not load any more items. If you scroll to the bottom and then scroll up just a little, it will load a bunch more items (out of view) then after a few seconds you can scroll down.

I’ve reproduced the problem here: http://codepen.io/anon/pen/mJJXvp?editors=101

For reference here is the code: html:

<html>
  <head>
    <meta charset="utf-8">
    <title>Ionic List Example</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Infitine Scroll</title>

    <link href="http://code.ionicframework.com/1.0.0-rc.4/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js"></script>
  </head>

  <body ng-app="listExample">
    <ion-content ng-controller="MyController">
      <ion-scroll direction="x" class="wide-as-needed" scrollbar-x="false">
          <a href="#" ng-repeat="pic in pics">
              <img width="150px" style="margin-left: 10px;" src="{{pic}}">
          </a>
      </ion-scroll>
      <ion-list>
        <ion-item ng-repeat="item in items">{{item}}</ion-item>
      </ion-list>

      <ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

    </ion-content>
  </body>
</html>

js:

angular.module('listExample', ['ionic'])
.controller('MyController', function($scope) {
  $scope.items = ['thing 0'];

  $scope.pics = [
    'http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg',
 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg'
  ];

  $scope.loadMore = function() {
    $scope.items = $scope.items.concat("thing "+$scope.items.length);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

});

You’ll see that items begin to load, but then it stop and doesn’t continue to load when you reach the bottom of the list.

If you remove the ion-scroll block infinite-scroll works as intended.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

Thanks! @perrygovier , the $timeout solution solved my problem

Edison767e on Jan 15, 2017

This is a bit embarrassing, but I have no idea what I was talking about 19 days ago.

The problem is because infinite scroll is checking the first scrollable area registered to see if it should keep going and not necessarily the one it’s inside. This needs to be fixed.

A temporary hack to help you with your deadline is to wrap the ion-scroll in an ng-if associated with a var that evaluates to true in a $timeout so it’s the second scrollable area to register on that page. Here’s an example: http://codepen.io/perrygovier/pen/EjgyMY?editors=101

While that may work, it’s a hack. I’m going to mark this as a bug that needs to be fixed asap.

perrygovier on May 20, 2015

It also worked for me, but why isn’t this fixed on the latest version? Anyway thanks.

ghost on Feb 15, 2017