[infiniteScrollDistance] and (scrolled) do not work as expected about ngx-infinite-scroll HOT 9 CLOSED

I think you'll have to change the infiniteScrollDistance. I use 0.8 and thats about 75% down the page. As for the scroll up/down, in 0.1.3 they are differentiated.

from ngx-infinite-scroll.

Thanks @tallkid24. Both of these already updated angular2-infinite-scroll 0.1.4.

This plunker uses [infiniteScrollDistance]="2"
This plunker uses [infiniteScrollDistance]="0.8"

Right now both of them only run onScrollDown() one time in the beginning when you scroll.
But still how can I run onScrollDown() only when scroll down near the bottom?

from ngx-infinite-scroll.

Hi @orizens , would you mind adding a working simple plunker demo in the readme Showcase Examples part? So people can start quickly.

Some demo like this plunker, automatically add another 20 items when scroll down near the bottom. (But right now it won't work well)

Thanks

from ngx-infinite-scroll.

@hongbo-miao
you should use this style:

.search-results {
      height: 100%;
      overflow: scroll;
    }

since the way you constructed the directive is to listen to the window scroll and the the actual div.
if you want it to scroll relatively to the div, you should set [scrollWindow]="false"

from ngx-infinite-scroll.

@hongbo-miao
i forked your plunkr and added to the demo.
thanks.

from ngx-infinite-scroll.

@hongbo-miao also,
I see an issue where the immediate scroll, scroll in the beginning.
I think that the issue that you describe should be in defined in a new issue thread.

from ngx-infinite-scroll.

@orizens thanks! That is awesome!
That "issue" is because of I set immediateCheck to true I guess..

from ngx-infinite-scroll.

great.
ok. i'll update the examples and docs for this as well.
Thanks!

from ngx-infinite-scroll.

Hello,
I think I have found a little workaround that fixes this issue by setting the infiniteScrollThrottle to 0, and make your own throttling method.

So here's how I did it:

in the HTML side, use these attributes:

[infiniteScrollThrottle]="0"
(scrolled)="loadMore()"

on the other hand, in the ts file, make your own throttling condition in the loadMore() function:

loading = false;
loadingThrottle = 300;

loadMore() {
    if (!this.loading) {
      this.loading = true;

      window.setTimeout(() => {

        // your loading logic here..

        this.loading = false;
      }, this.loadingThrottle);
   }
}

Hope this helps.

from ngx-infinite-scroll.