CODEWITHSUNDEEP
angularjslaravel-5infinite-scrollnginfinitescroll
Glen Pinheiro
Glen Pinheiro

Reputation: 216

ng infinite scroll with angular js not working in responsive view and mobile devices

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.

Upvotes: 0

Views: 1147

Answers (1)

Glen Pinheiro
Glen Pinheiro

Reputation: 216

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.

Upvotes: 1

Related Questions