CODEWITHSUNDEEP
javascriptangularjsinfinite-scrollnginfinitescroll
Maximus Dredoff
Maximus Dredoff

Reputation: 306

Why ngInfiniteScroll (infinite-scroll) doesn't work on mobile devices?

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);
        });

Upvotes: 2

Views: 1645

Answers (2)

Alaeddine
Alaeddine

Reputation: 23

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"

Upvotes: 0

Danish Kundra
Danish Kundra

Reputation: 124

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(); } });

Upvotes: 0

Related Questions