Скачать или смотреть Angular Infinite Scroll with sorted list results in endless loop

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!Angular Infinite Scroll with sorted list results in endless loop

Description
I'm working on an Angular project. I implemented an "infinite scroll" list utilizing IntersectionObvserver. Generally it works quite well and satisfying.
IntersectionObvserver
The entries to build the list are being sorted ascending.
Problem
In Angular this causes the problem that the HTML list is built upwards while the scrollbar remains at the same position that triggered the infinite scroll event, which causes the event to fire over and over and over again until the user scrolls away manually.
That the event is being fired as long as the infinite scroll trigger is in the viewport is desired behavior, because depending on the viewport height and user preferences it can't be guaranteed that there will always be enough items to fill the whole page initially. New items must be loaded continously until the page is filled.
StackBlitz example
https://stackblitz.com/edit/angular-i...
https://stackblitz.com/edit/angular-i...
Scroll to the very end of the list to trigger the infinite scroll event. It will keep the scrollbar at the same position and firing the event while building the list upwards.



In the generateItems() function there is a call to sortItems(). When you disable this call the scrolling behavior of the infinite scroll list works properly. New items added to the list cause the list to grow and push the infinite scroll trigger out of the viewport.
generateItems()
sortItems()
CodePen example
When I implement the same infinite scroll logic using native JavaScript with jQuery it works as expected, even when the results are sorted.
JavaScript
jQuery
https://codepen.io/mw-108/pen/ExqPKmG
https://codepen.io/mw-108/pen/ExqPKmG
Here the infinite scroll trigger is always pushed out of the viewport when the list is updated. This is what I expect.
Questions
Am I doing something wrong in Angular?
What can I do to reproduce the same result I see in the JavaScript / jQuery example in Angular?


Tags: javascript,jquery,angular,infinite-scroll,intersection-observerSource of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/