Logic for triggering scrolled callback

I am opening this issue because I wanted to discuss an unusual behaviour, I encountered while make an angular2+ app using ngx-infinite-scroll.
So basically, I was writing a chrome extension where I was lazy-loading rows from websql. Everything was working fine until I was using enough number of elements to make container scrollable at first fetch of rows from websql. But when I tried fetching less elements (just enough to make the container unscrollable at first load), scrolled function wasn’t called. The apparent reason for this could be - the `scroll’ event didn’t fire as the container was not scrollable.
Let me give an example so that you can reproduce it.

1. A container takes 5 child elements to make the Scroll show up on it.
2. If I keep the child elements more than 5. The scroll shows up and directive works fine meaning i am able to load all the rows when I scroll down.
3. If I keep the child elements less than 5 ie 4. The scroll don’t show up and Scroll event is never called. Here is the plunker:
   https://embed.plnkr.co/k1jr5g/

To reproduce the behavior, Go to app.ts, declare sum = 5 and rerun the plunker, You will see component stops loading the items after just 5 items. If you use sum = 15, the directive will work fine.
Hopefully, the developer will resolve the issue.

[Vikasg7]

@orizens here is a link to swf file that you can play.
https://www.dropbox.com/s/l9e6e67kshtfxv7/ngx-infinite-scroll.swf?dl=0

I tried 0.8.0 and found to be not good. It’s not calling Scrolled handler in either of both cases.

[orizens]

@juliamarjana please open a separate issue.