ngInfiniteScroll - loadMore() method gets called on every mouse-scroll

Question

Solution below on the comments.

Problem: My loadMore() method gets executed on every container's scroll.

Meaning: loadMore() gets executed on each mouse scroll of the parent container (infinite-scroll-parent="true")

Desired result: to get loadMore() execute only when infiniteScrollDistance meets its conditions, instead of any tinny scroll I do.

My code is highly inspired by the demo_basic & demo_async.

My app is a photos gallery. I load the photos by ajax call, and populate them into a thumbnail directive repeater. I disable ng-Infinite-Scroll on controller initialization, and enable it on callback success.

    <div class="thumbnails grid__item page--content">
            <div id="gallery" class="unstyled-list" 
                    infinite-scroll='loadMore()' 
                    infinite-scroll-disabled='album.busy' 
                    infinite-scroll-parent="true" 
                    infinite-scroll-immediate-check="false" 
                    infinite-scroll-distance='2'>
                    <my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
            </div>
    </div>

My coffee code has no surprises. It's logic is unimportant, because if I place a simple console.log, the problem still occurs.....

    $scope.album.busy = true
    $scope.loadMore = ->
            $scope.$apply ->
                    $scope.album.busy = true
            console.log('loadMore() been executed here')

My thumbnail directive is the same. No surprises, moment last photos gets populated onto the repeater, I enable the component.

    app.directive 'myPhotoDirective', ['$window', ($window) ->
        return {} =
            ....
            link: (scope, element, attrs) ->
                if scope.$last
                    scope.album.busy = false

I got no idea what i'm missing or doing wrong. I hope someone will be here to help me.

Thank you.

would help alot if you could recreate this in a plunker so we could see where the bug is. — Sten Muchow, May 19 '14 at 13:17
It`s little complicated..... Its an app under dev, and I cannot expose it yet... Its the whole app, and probably some issue with my css and height calculation, that existing in my app, but will not in a clean code example.... Thats why I tried to expose maximum possible components of my app, hopefully that maybe someone already experienced this problem that in his ngInfiniteScroll implementation... **I`ll see what I can do guys** — neoswf, May 19 '14 at 13:50
If you can see the issue within a small plunker app, then it'll be easier to debug for yourself and us. Use chrome dev tools to see if the reported height of the elements is what you'd expect. — Paul Lemke, May 19 '14 at 14:46
I commented my answer. Here`s a direct link for your comfort - http://stackoverflow.com/questions/23666712/nginfinitescroll-loadmore-method-gets-called-on-every-mouse-scroll#answer-23786831 — neoswf, May 28 '14 at 13:31

score 17 · Answer 1 · edited May 23 '17 at 12:02

17

Without a Plunker to see the actual code I'll direct you right to the ngInfiniteScroll FAQ:

Why is ngInfiniteScroll triggering my expression on every single scroll event?

The infiniteScroll directive uses the height of the element that it's attached to in order to determine how close to the bottom of the window it is. In some cases, the browser can report a height of 0, which causes this behavior. Usually, this is due to a container element that only contains floated children. The simplest way to fix this problem is to add a "spacer" element to the bottom of the container (something like <div style='clear: both;'></div>); see this StackOverflow question and its associated answers for more details.

edited May 23 '17 at 12:02

Community

1
1

answered May 19 '14 at 14:44

Paul Lemke

5,494
3
47
66

That's the thing.... I saw that faq item when I was trying to resolve my problem, and my container has height(), and all his parents (bubbling up) as well.... My container has a ```overflow:scroll```css property – neoswf May 19 '14 at 17:12
Try setting the infinite-scroll-distance to 0. What happens? – Paul Lemke May 19 '14 at 20:52
My problem is calculation between ```$Container``` and ```$Elem```. ```shouldScroll``` always resolve true. – neoswf May 19 '14 at 21:44
```infinite-scroll-distance="0"``` did not help me man. sorry. It even force it to immediately execute the loadMore() function. – neoswf May 19 '14 at 21:48
Thank you man. I have fixed it. I will document later below my problem. I will give you the bounty. _Thank you._ – neoswf May 19 '14 at 23:11

score 7 · Answer 2 · edited May 23 '17 at 12:02

7

Let me add my two cents, had exact same problem, different solution! I have been debugging ng-infinite-scroll all day. At one point, I realized that javascript reports $(window).height() == $(document).height() which makes no sense whatsoever.

I did a bit googling, and it happens when you're missing DOCTYPE: jquery $(window).height() is returning the document height

But, that was not enough! My DOCTYPE was eaten by browser, at one point. You can read further: Too big number of $(window).height() on wordpress

edited May 23 '17 at 12:02

Community

1
1

answered Aug 07 '14 at 18:06

Erti-Chris Eelmaa

25,338
6
61
78

Thank you for this!! It has solved my scrolling up trigger issue. – pyramidface Jul 30 '15 at 09:26

neoswf · Accepted Answer · 2014-05-21T15:05:38.393

I have solved my problem.

One of foundation properties that NIS (ngInfiniteScroll) measure, are $containerand $elem

$container is the parent of the scrolled elements Element.
$elem is the Element that contain the scrolled elements.

Example

<$container> <!-- can be a div -->
    <$elem> <!-- can be a list -->
        <photo/>
        <photo/>
        <photo/>
        <photo/>
    </$elem>
</$container>

What NIS is trying to do, is to calculate on each mouse scroll, if enabled, the relation between these two elements, and check if $elem is taller than $container, and then scroll down or not. (it also check other properties like - distance, immediate-check & disabled).

So this relation between this two fundamental elements, is crucial for the understanding & debugging of NIS.

So my problem was exactly that - The $container and $elem were equal at their height.
I had fixed css height values (100%) on both elements (mainly cause I read in the documentation that I must pass height), and by mistake I fixed $elemwhich was totally wrong.

Secondly - infinite-scroll-distance can cause this to happen as well. If the value that you're setting is high (let's say 2), and your loadMore() method don't populate enough items, even if you disable runtime of the method, than you will get infinite loadmore() executions.

It seems that there is a huge problem with the package. My colleges and I cant seem to get your code to work with floating children. We've tried everything in the documentation and on SOF. No luck, going to write our own directive. — Carlos Pliego, Oct 19 '15 at 18:04

score 1 · Answer 4 · answered Nov 19 '15 at 19:53

This might seem obvious, but it evaded me for a day.

I followed the example shown in the image on the homepage of NIS:

The important part to notice is the scroll distance:

infinite-scroll-distance="3"

According to the documentation,

if the browser window is 1000 pixels tall and infinite-scroll-distance is set to 2, the infinite scroll expression will be evaluated when the bottom of the element is within 2000 pixels of the bottom of the browser window. Defaults to 0 (e.g. the expression will be evaluated when the bottom of the element crosses the bottom of the browser window).

During my development, I only had ~50 items displaying, and thought, albeit incorrectly, that NIS was firing infinitely. In fact, it was just trying to fill up ~4000 pixels.

TL;DR: Remove (or at least reduce) infinite-scroll-distance if you have it set.

score 1 · Answer 5 · answered Jan 14 '16 at 11:17

Put a lot of time just to figure it out. For me infinite scroll's method was called infinitely, so i did a bit of research & came to conclusion that it was happening beacause the height of my "div" for infinite scroll in my code was 0, was not increasing at all, so it was thinking all the time that the user was at the end of the page. So the solution for me was to add a "clearfix" html class to the next element of the "div" for infinite scroll.

score 0 · Answer 6 · answered Apr 21 '15 at 15:22

I had similar problem, except that infinite scroll wouldn't even stop loading by the time I reached end of container (I used infinite-scroll-container option from v1.2). After long debug, I noticed that container height was float (634.245px for example), whereas internal element height was close to it, but int (635px for example) and it would trigger cycle over and over, because it thought that bottom limit was reached. The problem with ng-infinite-scroll is that its visual and it doesn't deal with actual data, so I had to check for returned data from backend and block it if results were empty (infinite-scroll-disabled related function).

score 0 · Answer 7 · answered Jun 03 '15 at 15:35

I figured out the html format should be somewhat like this for nginfinitescroll to work. The addition of a dummy outer div with fixed height solved my problem

<div style="height:500px;">
   <div  infinite-scroll="myPagingFunction()">
     <div  ng-repeat="x in images"></div>
   </div>
</div>

Hope it helps somebody.

ngInfiniteScroll - loadMore() method gets called on every mouse-scroll

Solution below on the comments.

7 Answers7

Linked