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:
+18
-3
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user