Logic for triggering scrolled callback

[Vikasg7]

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.

[orizens]

hi @Vikasg7 by inspecting the plnkr, that's the intended behavior. if you decrease the height of the container to say, 100px, the directive respects that and trigger the scrolled event.

[Vikasg7]

Hello @orizens, thanks for replying.
Don't you think this behaviour is not flexible 'coz User has to make sure Container always shows up with the scroll which I think can be difficult in different screen sizes.
I used the Ionic1's infinite-scroll directive in my other application and I tested the app for the same behaviour before writing an issue here but that passed out. Meaning, it was still calling the scroll handler even if Container was not scrollable at first load of rows until I myself set the disableScrollDirective property within the code to true.
The same component in the Ionic2+ must be implemented the same way.
So I think logic can be like this:

1. Keep calling the Scrolled handler while infiniteScrollDisabled = false && isContainerScrollable = false
2. When scroll shows up, call Scrolled handler on the Scrolled event when the user scrolls down until infiniteScrollDisabled is set to true.

Hope my explanation encourages you to make changes.

[orizens]

hi @Vikasg7 currently, the scroll event is still attached, so, practically, if you add more items the scrolled event is triggered. to test this, edit the html that includes the 4 items and then scroll the container.

[Vikasg7]

@orizens, the Scrolled handler is not called when the container is not scrollable.
here is the proof
https://www.screencast.com/t/viMilwO3Yn

In above screencast, you can see exactly which I explained in my previous post here in this thread.

[orizens]

@Vikasg7 i cannot see the screencast (have no flash). please try latest 0.8.0

[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.

[juliamarjana]

Hi ,

I am using ngx- infinite-scroll in a project , and I am having some problems . It works when I scroll down , or/and scroll up , for the first time . But when I scroll down or up , again , for a second time , the event does not get triggered anymore .

Can you kindly help me to solve this problem ?

Thank you , Julia

[orizens]

hi @juliamarjana can you share an example?

[orizens]

hi @Vikasg7 please try latest version 0.8.3

[Vikasg7]

@orizens, Sir, I am still finding the same behaviour.
See the following plunker. https://embed.plnkr.co/CWQ9d9krEJvYQoS6Arun/

When I use sum = 5, initially when the container loads up, it is not scrollable, meaning there are less elements (ie 5) to make the container scrollable. So as per current implementation, the scrolled handler is not called. But that is not the behaviour I want. As container height can be different in different screen sizes. You shouldn't force the user to fix it beforehand. Instead, scroll event should be emitted even if the container is not scrollable at the first load of data until user mark disableInfiniteScroll = true himself inside the code.

Please have a look at Ionic2 infinite-scroll implementation, as they are allowing the user to call a method "complete()", when data is fully loaded. Until then, they keep calling the scrolled handler.
infite-scroll

I encourage you to use ion-infinite-scroll once, you will find that even if you pull only two rows worth data initially, it doesn't stop calling on-scroll event handler until the user calls complete() method.

Make sense?

[juliamarjana]

Hi ,

Thank you for your answer . If the problem is that the scroll event is not emitted anymore , It means that we are closer to the solution .

@orizens Is the emission of this event stopped , somewhere in a If(){} clause ?

Can you kindly help me to locate this place ?

It would help me a lot!

Thank you for your help and for sharing the directive with us !

[orizens]

@juliamarjana please open a separate issue.