Nach dieser äußerst repräsentativen Umfrage auf Mastodon, wie Infinite Scrolling bevorzugt genutzt wird, haben es drei von fünf Nutzern lieber interaktiv. Das heißt erst per Click wird neues Zeugs geladen.
Naja, dann kann ich ja meinen Infinite Scrolling Branch im Photoblog löschen…
Allerdings nicht ohne mal kurz aufzuschreiben wie ich das eigentlich umsetzen wollte.
Neue Fotos sollten immer eingeblendet werden, wenn die Unterkante der Seite erreicht ist, bzw. wenn der „Mehr Laden“-Button in den ViewPort scrollt.
Anstelle einer ulkigen scrollTopLengthHeightWasAuchImmer()-Konstruktion, habe ich es mit der Intersection Observer API versucht. Und das war ziemlich einfach:
// Das ist der Link mit dem Click Event zum Laden weiterer Fotos.
const loadMoreButton = document.querySelector('#load-more')
const loadMoreButtonObserver = new IntersectionObserver(
(entries, options) => {
for (let entry of entries) {
if (entry.isIntersecting) {
entry.target.click()
}
}
}
)
if (loadMoreButton) {
loadMoreButtonObserver.observe(loadMoreButton)
}