Issue: Infinite scroll is loading all pages at once instead of waiting for the user to scroll to the page bottom.
Environment: AngularJS 1.3.17 Materials Design 0.10.0 Infinite scroll script: https://github.com/sroze/ngInfiniteScroll Demo being used:
The page with the infinite scroll is located within a nested view.
HTML directive implementation:
<div class="row row-sm">
<div infinite-scroll='nextPage()' infinite-scroll-disabled='busy' infinite-scroll-distance='0' class="m-l-n m-r-n">
<div class="col-sm-12" ng-repeat="post in posts" ng-init="parentIndex = $index">
- Symptoms:
- Requests are firing continuously until no more data is received from the API. It seems to trigger the loading of additional pages consistently as if it thinks we have reached the bottom of the page each time.
- The code was functioning correctly before transitioning from Bootstrap to Material Design.
- When the ng-repeat contains class="col-sm-12", removing it or setting style="float:none" results in loading only the first page but stops responding when reaching the page bottom.
I do not require a windowed solution (the current one is working fine). I prefer a Facebook-like approach where reaching the actual page bottom triggers the next load, rather than scrolling in a limited space.
Please advise on any additional information needed.
Any assistance would be greatly appreciated! :)
Thank you!