SPA - Statusänderung beim Scrollen?

[Winkelmaus Herzogblau]

Wie kann man erkennen, welcher State /welche Seite gerade im Viewport sichtbar ist?

https://forum.selfhtml.org/m1675317?

Das Ereignis visibilitychange wird nur ausgelöst, wenn sich die Sichtbarkeit des gesamten Dokuments ändert, d.h. wenn der Benutzer zwischen den Browser-Tabs wechselt.

Geht um die Sichtbarkeit von Teilen eines einzelnen Dokuments, muss das allem Anschein nach zu Fuß erledigt werden. Für die betreffenden Elemente muss bei scroll- und resize-Ereignissen mit getBoundingClientRect() die Position abgefragt werden; getBoundingClientRect() liefert Koordinaten relativ zum Viewport. Das könnte dann in etwa so aussehen:

function inViewport(e) {
    var r = e.getBoundingClientRect();
    return !(r.bottom < 0 || r.right < 0 || r.left > window.innerWidth || r.top > window.innerHeight);
}