Angular 4: Infinite scroll default behavior not working

Question

I am trying to implement infinite scroll in my Angular 4 application. I have followed all the directions from https://www.npmjs.com/package/ngx-infinite-scroll

In the document it says:

By default, the directive listens to the window scroll event and invoked the callback. To trigger the callback when the actual element is scrolled, these settings should be configured:

[scrollWindow]="false"

set an explict css "height" value to the element

But the default window scroll event is not triggered in my case. Instead if i set a height for a div element and set [scrollWindow] = "false", then it works in that case. I do not know what am I missing.

Example in given document imports

{ platformBrowserDynamic } from '@angular/platform-browser-dynamic';

but i have not imported that in my module. Is that causing the issue. I think it's not the cause.

Any help will be appreciated. Thanks.

Does the div you've put the data-infinite-scroll directive have an explicitly set height? — Mihailo
– Mihailo, Commented Sep 19, 2017 at 17:36
Yes it does. Do I need to set height for default behavior too? — Prabesh
– Prabesh, Commented Sep 20, 2017 at 4:02

armache · Accepted Answer · 2018-01-09 18:43:23Z

3

You can achieve infinite scroll functionality without installing extra packages. The below example works for me.

app.component.ts

export class AppComponent
{
    stones: Array<any>
    margin: number = 10;

    constructor() {

        this.stones = new Array<Object>();
        this.populate(this.margin);
    }

    onScroll(event: any) {

        if (((window.innerHeight + window.scrollY + 1) >= document.body.offsetHeight) || ((window.innerHeight + document.documentElement.scrollTop) >= document.body.offsetHeight)) {
            this.populate(this.margin);
        }
    }

    populate(margin: number): void {

        for (let i = 0; i < margin; i++) {
            this.stones.push(new Object());
        }
    }
}

and your app.component.html

<div (window:scroll)="onScroll($event)">
    <div *ngFor="let item of stones">
        <div style="width:100px; height:60px; background-color:green;margin:20px"></div>
    </div>
</div>

answered Jan 9, 2018 at 18:43

armache

6066 silver badges24 bronze badges

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

1 Comment

x-magix Over a year ago

I give you plus event that your solution do not work, but you gave me good idea instead. My solution was if ((document.body.scrollHeight - window.innerHeight - window.scrollY) < 50) {...}

Collectives™ on Stack Overflow

Angular 4: Infinite scroll default behavior not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related