AngularJS + Material Design break infinite scroll

Question

Problem: infinite scroll starts loading all pages at once, instead of waiting for a user scrolling to the page bottom.
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">

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!

Hi, did you find the issue to your problem ?, i'm having exactly the same ! Thanks — RNo
– RNo, Commented Oct 12, 2015 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
– oharlem, Commented Oct 12, 2015 at 15:05
Hey, thanks for the answer. I saw that Material added a Virtual repeat (material.angularjs.org/latest/demo/virtualRepeat), but the md-virtual-repeat-container doesn't have consistent height, which is a problem... see: github.com/angular/material/issues/3368 — RNo
– RNo, Commented Oct 13, 2015 at 10:07

André Bueno · Accepted Answer · 2016-01-20 13:15:42Z

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">

answered Jan 20, 2016 at 13:15

André Bueno

991 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS + Material Design break infinite scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related