Ngx-infinite-scroll: infiniteScrollDistance explanation

[trungk18]

Hi orizens,

First of all, thanks for your time writing this library for Angular 2 ecosystem. I have applied it to my project already. But through the doc, I don't really get infiniteScrollDistance mean.

infiniteScrollDistance - (optional, default: 2) - should get a number, the number of viewport lengths from the bottom of the page at which the event will be triggered.

So how the number here is measure, is there any equivalent such as percentage or pixel? It will be much more easy to visualize If let say "the event will be fired if the scroll reach over 70% of the container height".

[tobi-or-not-tobi]

@trungk18 I believe you can use a percentage by doing [infiniteScrollDistance]="0.3" which would mean: start scrolling when 1/3 of the viewport height is reached. So, in case you have a page of 2000 pixels height, and your viewport is 1000px height, scrolling starts when you scrolled down 666px.

The default value "2" seems to be a bad default to me and it took me some time to figure out that I should decrease this in order to get the right effect. Especially since my data is coming async from a slow backend, which is causing a number of scrolled events – assume thats something I need to take care of myself.

[orizens]

hi @trungk18
I followed ng-infinite-scroll v1.
the smaller "scrollDistance" is, the more you would have to scroll in order to get an "onScrolled" event.

[orizens]

v0.8.0 introduce distance as the percentage point where the event will be triggered from the end of the container's height.
This means that a value of 2 represents a breaking point of the last 20% in the container's height.
if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event.

[orizens]

closed by 269b5f6dd84125698620ffce8f0f8b4b1a1bafe5