does the issue also exist when testing on a real android/ios device?

Sabeeb, can you please provide your app or a simple app so we can look into that?

you are right, it mostly with CSS property you changed or not defined for your custom theme.

It might also be worth looking at the "Infinite Scroll Threshold" which might help trigger the onscroll ending event. 

Least you canuse it to troubleshoot. 

Here's some information about it:
https://success.outsystems.com/Documentation/Best_Practices/Development/Mobile_Data_Rendering

Here is how to implement it: 

the infinite-scroll-threshold is usually set to 2000px, and i believe its how many pixels from THE END of your list you have to be to trigger the event, so you could reduce it to 500px, to see if that triggers it?

Also did you let Service Studio automatically create the onScrollending Action, as it may be an issue in the logic in that action? 

In your use case, what is the Max records and the increment set to? How many entries are in the entity that is being displayed in the list?

Thanks for confirming that information. From your original post I can see this functionality works when you had the default OutSystems style, but when using the Company style guide it does not work. 

We would be able to assist further if you were able to provide an oml with the error happening so we can test it here. you should be able to copy the company style guide into the theme of the sample module you share with us so we can see where the issue lies.

Chris

Sorry ,I may not be able  to share the company specific styles , What am curious is , How to find out the internal logic behind to trigger the OnScrollEvent  (when to trigger on Scroll End  event) so that i can further trouble shoot the issue . It may be related to the height of the screen and scroll property.

Got the problem. overflow-y: initial was set instead of auto for the screen container div. Updating Out system UI version or an overriding of this property corrected the issue.

.screen-container {

   overflow-y: initial;

 height: auto;

}