GoogleChrome
IntersectionObserver Sample can stop loading
There is a fundamental issue with the IntersectionObserver sample that can stop it from loading additional elements. The problem is that you can never be sure that you have moved the sentinal far enough to be outside of the viewport again. If the user is scrolling so fast that moving the sentinel did not put it outside of the viewport, the IntersectionObserver will not call the callback and the loading halts.
On the sample page, you can reproduce the problem as follows
- Click and hold the scrollbar
- While keeping the mouse-button down, move the mouse around 300 pixels to the right, then move it straight down until just above the bottom of the scrollbar, then move it to the left again until the panel scrolls down.
- The list will now be scrolled down to item 15, the scrollbar will remain at the end and no more items will be loaded.
In our codebase, we are facing the same fundamental problem, that if a user scrolls down too fast, the sentinel will not be moved down far enough. The workaround that we ended up using is that we remove the sentinel and place a new sentinel at the end. If the new sentinel is again in the viewport, the IntersectionObserver will fire, because it wat not in the viewport before. This is not the recommended approach of recycling sentinels. Do you know of any way to recycle the sentinel without running into this problem?
