0

  1. Problem: infinite scroll starts loading all pages at once, instead of waiting for a user scrolling to the page bottom.

  2. Setup: AngularJS 1.3.17 Materials Design 0.10.0 Infinite scroll script: https://github.com/sroze/ngInfiniteScroll Following this demo: http://sroze.github.io/ngInfiniteScroll/demo_async.html

    The page with the infinite scroll is inside the nested view.

HTML directive used like this:

<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">
  1. Symptoms:
    • it starts firing requests in sequence until no more data is coming from API. Impressions is that it thinks that we hit the page bottom all the time = a signal to load one more page.
    • the same code was working perfectly before migration to Material Design (from 100% Bootstrap)
    • with the ng-repeat contains class="col-sm-12", if removed OR if I set style="float:none" it loads the first page only, BUT does not react on reaching the page bottom any more.

Also, I do not need a windowed-solution (this one works fine), rather - Facebook type, when we actually need to reach a page bottom, not to scroll in a limited space.

Please let me know what kind of additional information you may need.

Guys, please help!! :)

Thank you!

oharlem
  • 962
  • 6
  • 12
  • Hi, did you find the issue to your problem ?, i'm having exactly the same ! Thanks – RNo Oct 12 '15 at 12:50
  • Hey @RNo, No :( No solution yet. Meanwhile, I decided to use a manual next page trigger (same script) and one of the reasons for that was a research doc I found discussing disadvantages of infinite scrolling. Also, I wanted to wait for Material's own virtual scroll, although I had no opportunity to port & test yet. – oharlem Oct 12 '15 at 15:05
  • 1
    Hey, thanks for the answer. I saw that Material added a Virtual repeat (https://material.angularjs.org/latest/demo/virtualRepeat), but the md-virtual-repeat-container doesn't have consistent height, which is a problem... see: https://github.com/angular/material/issues/3368 – RNo Oct 13 '15 at 10:07

1 Answers1

1

I had the same problem before, so I set

infinite-scroll-immediate-check="false"

check the documentation here

And one thing you need to remember is to set the busy variable as false at the beginning of your controller.

<div class="row row-sm">
<div infinite-scroll='nextPage()' infinite-scroll-disabled='busy' infinite-scroll-distance='0' class="m-l-n m-r-n" infinite-scroll-immediate-check='false'>
    <div class="col-sm-12" ng-repeat="post in posts" ng-init="parentIndex = $index">
André Bueno
  • 71
  • 3