Scrolled event is not firing always when scrolling the container

[hezaltin]

Our project has requirement is that we are using a table container(not a window) of ngx infinite scroll, requirement is that we are appending a data on scrolled event. The issue is that the scrolled event is not triggering if the next list is empty

We tried with the 'alwaysCallback' property in the ngx infinite scroll container, it was not working as expected

Expected Behavior

should invoke the scrolled event whenever i scroll the container

Actual Behavior

scrolled event is not triggered whenever i scroll the container

Possible Solution

Steps To Reproduce / Demo (if applicable)

https://stackblitz.com/edit/ngx-infinite-scroll-khphwf?embed=1&file=src/app/modal/modal.component.ts

1. Open Modal window
2. Scroll down, please check the console of onScrollDownModal
3. Sroll next time, the onScrollDownModal will not printed in console, ie scrolling down is not triggering the event.

we have checked in the modal container as well, the scroll event is not triggered if the next line of data is not appended;

Context

Your Environment

• Version used:ngx-infinite-scroll=0.8.4; angular = 5.2.7
• Browser Name and version: chrome & 71.0.3578.98
• (Optional) Operating System and version (desktop or mobile): desktop
• (Optional) Link to your project:

[orizens]

@hezaltin this is the expected behavior of the component.
the logics for emitting a scroll down event takes the height into consideration - this is done for optimizing the scroll event emitting and making sure the same scroll isn't called more than once.
Since the height isn't changed - the scroll down event isn't trigger.
therefore, a good solution for you is to use an observable for the modal's body content - so when you update the observable's stream (after at least one scroll event), the content is then rendered.

[hezaltin]

Thanks for your quick response. its really helpful to understand the infinite scroll work flow. We solved the issues based on your comment, your comment made us to think the right direction. Thanks again!!

[HashimJaved09]

@hezaltin this is the expected behavior of the component.
the logics for emitting a scroll down event takes the height into consideration - this is done for optimizing the scroll event emitting and making sure the same scroll isn't called more than once.
Since the height isn't changed - the scroll down event isn't trigger.
therefore, a good solution for you is to use an observable for the modal's body content - so when you update the observable's stream (after at least one scroll event), the content is then rendered.

@hezaltin can you please explain the solution to me I am having this same problem...!!!

[UlisesCeca]

@hezaltin it'd be nice if you shared your solution. Asking for help and then not sharing the solution is kinda lame.

[ghost]

We had a similar problem:
We had a list of products rendered on our page, which worked fine with the inifite scroll, except when we had scrolled down and triggered the (scrolled) at least once, then searched/filtered the products so that we have a new, shorter produt-list. Now the (scrolled) would not fire.
I understand that it is propably a good default behaviour to not fire (scrolled) when the size stays the same, but not firing it when the container-height gets smaller seems a little inconvenient to me, since it strongly implies a data-change.
The above-mentioned solution whith the observable should work, but we simply added [allwaysCallback]=true.