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

Created on 1 May 2015 · 16Comments · Source: ionic-team/ionic-framework

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.

Source

greatwitenorth

Most helpful comment

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 20 May 2015

👍2

All 16 comments

Adding an $ionicScrollDelegate.resize() appears to resolve the issue.

perrygovier on 1 May 2015

I tried adding $ionicScrollDelegate.resize() right after I load my images into the scroller but now it only loads the first page of items and then no more. Where should I put the resize?

greatwitenorth on 1 May 2015

Also noticed that the second page for the list below does get called by the infinite scroller when I scroll to the end of the images in the slider (there's about 15 in my app).

greatwitenorth on 1 May 2015

@perrygovier did you have a codepen to show it working? I still can't get it working on my end.

greatwitenorth on 4 May 2015

@perrygovier any word on this issue? It's currently holding up release of a project. Did you happen to have a codepen that could provide a fix while I wait for a new release to fix it?

greatwitenorth on 18 May 2015

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.

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 20 May 2015

👍2

@perrygovier Thanks, that did the trick.

greatwitenorth on 21 May 2015

Same - weird hack but it works today ionic v1.2.5

jbeuckm on 27 May 2015

Can I have 2 ion-infinite-scrolls in one page? I tried and now worked. Clear me please.

sliontc on 14 Oct 2015

Try with 1.2 coming here soon, should be fixed.

mlynch on 10 Dec 2015

any update about this? 👍

cinder92 on 25 Aug 2016

My ion-infinite-scroll doesn't work when inside of an ion-scroll. I'm using Ionic 1.3.1

SeanHub on 30 Sep 2016

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

laoyipay on 15 Jan 2017

👎1 👍1

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

ghost on 15 Feb 2017

👍1

Not working in Ionic 3. Any solutions?

jayzyaj on 24 Jul 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.