Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 8 years ago
Comments:16 (3 by maintainers)

Top GitHub Comments

2reactions

laoyipaycommented, Jan 15, 2017

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

2reactions

perrygoviercommented, May 20, 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.

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.