Infinite Scroll: nachladen, bis Sentinel aus dem Viewport wandert

Der IntersectionObserver feuert nur bei Zustandswechseln. Füllte die erste
Feed-Seite den Viewport nicht über den Sentinel hinaus (Hauptfeed mit 198
Roots), kam es nie zu einem Übergang und damit nie zum Nachladen. loadMore
prüft jetzt nach jedem Fetch, ob der Sentinel noch sichtbar ist, und lädt
aktiv weiter; rootMargin 300px lädt zudem vorausschauend.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-07 18:05:24 +02:00
parent 466049ee9d
commit cad1fa5c5c
+18 -3
View File
@@ -127,6 +127,16 @@ function createFeed(feedEl, sentinelEl, urlFor) {
page++;
}
loading = false;
// Der IntersectionObserver feuert nur bei Zustandswechseln. Füllt die
// gerade geladene Seite den Viewport nicht über den Sentinel hinaus, gäbe
// es keinen Wechsel und nie ein Nachladen -> hier aktiv weiterladen, bis
// der Sentinel aus dem Sichtbereich wandert oder das Ende erreicht ist.
if (!done && sentinelVisible()) loadMore();
}
function sentinelVisible() {
return sentinelEl.getBoundingClientRect().top <= window.innerHeight;
}
function reset() {
@@ -136,9 +146,14 @@ function createFeed(feedEl, sentinelEl, urlFor) {
loadMore();
}
const observer = new IntersectionObserver((items) => {
if (items.some((i) => i.isIntersecting)) loadMore();
});
// rootMargin lädt schon kurz vor Erreichen des Sentinels nach (flüssiger und
// robust gegen den Fall eines 0-hohen Sentinels exakt am Dokumentende).
const observer = new IntersectionObserver(
(items) => {
if (items.some((i) => i.isIntersecting)) loadMore();
},
{ rootMargin: "300px" }
);
observer.observe(sentinelEl);
loadMore();