2

I've faced with problem that angular infinite-scroll doesn't work on mobile devices - tested on Xiaomi Redmi Note 4 and Samsung Galaxy 4.

My code works correctly on PC and on IOS devices.

Problem reproduces only on mobile devices.

Maybe someone faced with the same issue? Can you suggest me something? 

$scope.loadNews = function() {
  if ($scope.position > $scope.allNews.length) return;
  if ($scope.allNews.length > $scope.news.length) {
    var partOfNews = $scope.getPartOfEntities($scope.newsPosition, $scope.scrollNewsCount, 0);
    for (var i = 0; i < partOfNews.length; i++) {
      $scope.news.push(partOfNews[i]);
    }
  }
};

<div ng-hide="showSpinner">

  <div infinite-scroll='loadNews()' infinite-scroll-distance='0.5'>
    <hr>
    <news data="news"></news>

  </div>

</div>


        handler = function() {
          var elementBottom, remaining, shouldScroll, windowBottom;
          windowBottom = $window.height() + $window.scrollTop();
          elementBottom = elem.offset().top + elem.height();
          remaining = elementBottom - windowBottom;
          shouldScroll = remaining <= $window.height() * scrollDistance;
          if (shouldScroll && scrollEnabled) {
            if ($rootScope.$$phase) {
              return scope.$eval(attrs.infiniteScroll);
            } else {
              return scope.$apply(attrs.infiniteScroll);
            }
          } else if (shouldScroll) {
            return checkWhenEnabled = true;
          }
        };

          var applied = false;
          var touchmover = function () {
              if ( ! applied) {
                  applied = true;
                  $window.on('touchend', handler);
              }
          };

          $window.on('touchmove', handler);
          scope.$on('$destroy', function() {
              $window.off('touchend', handler);
              applied = false;
              return $window.off('touchmove', touchmover);
        });
Maximus Dredoff
  • 306
  • 2
  • 15

2 Answers2

0

You can use a simple piece of code based on scrolls

$('#news').bind('scroll', function(){ if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){ //alert(1); loadNews(); } });

Danish Kundra
  • 124
  • 1
  • 9
0

I had the same problem but i have discuvered that. If you are using

infinite-scroll-use-document-bottom="true"

then You have to set infinite-scroll-distance to 1

infinite-scroll-distance="1"

. it doesnt work on mobile if you set it to 0

infinite-scroll-distance="0"

Alaeddine
  • 23
  • 6