0

I'm using ng-infinite-scroll.js, the scroll feature is working fine in PC. When comes to the mobile/responsive view it is not loading any items while scrolling down.

<div class="row" infinite-scroll="loadMore('{!! slug !!}','{!! code !!}')" infinite-scroll-disabled='busy' infinite-scroll-distance='1'>

-------contents list----------

</div>

In mobile view control is not even getting inside '$scope.loadMore' method.

Let me know if there's any solution to resolve this issue. Thank in advance.

Glen Pinheiro
  • 196
  • 10
  • How are you debugging your application? put an **alert** statement in loadMore method check whether it is calling or not – Gangadhar JANNU Feb 14 '17 at 11:01
  • @Gangadhar Jannu, thats how i found out - no alert is logging inside loadMore when swithing to mobile view. – Glen Pinheiro Feb 14 '17 at 11:13
  • Hello Glen! It seems like I've faced with the same issue. Did you find any solution to your problem? – Maximus Dredoff Mar 22 '17 at 10:19
  • 1
    @MaximusDredoff, I have got solution for the problem. please see my answer. Also make sure your responsive css for mobile devices has not defined any predefined height. – Glen Pinheiro Mar 28 '17 at 14:37

1 Answers1

1

I have done number of steps to solve this issue. First thing I did was updated infinite scroll js to version ng-infinite-scroll - v1.2.0.

For fixing the issue I updated the code by adding an infinite-scroll-container as shown below:

<div id="infi-scroll">
  <div class="row" infinite-scroll="loadMore('{!! slug !!}','{!! code !!}')" infinite-scroll-disabled='busy' infinite-scroll-distance='1' infinite-scroll-container="'#infi-scroll'" ng-cloak>
    <div ng-repeat="single in projects" class="col-md-4 bottom-margin">
      <!-- listing goes here -->
    </div>
    <div ng-show='busy'>
      <center>
        <img src="images/ajax-loader.gif" />
      </center>
    </div>
  </div>
</div>

I found this code working with mobile devices as well without any issues.

Note: If height for html, body tags is defined under your responsive css it may affect the working in mobile devices. (eg: html, body { height: 100% !important; })

Hope this will solve your issue. Thanks.

Glen Pinheiro
  • 196
  • 10