Yet another IntersectionObserver mystery

[Gunnar Bittersmann]

@@Rolf B

Du hast dein Posting editiert‽ Gut, dass ich die ursprüngliche Version noch auf dem Schirm hatte, wo da stand

Bzw. in Codepen solltest Du schauen, ob er mehr als den ersten Arrayeintrag observiert.

Geschaut. Mal die Reihenfolge im Array zu [footerElement, asideElement] geändert. Bei spread syntax scrollt nun das asideElement durch, die Überschrift verschwindet erst, wenn das footerElement kommt. Es wird also tatsächlich nur das erste Array-Element observiert.

Bei der Schleife ist das natürlich nicht der Fall. Die Reihenfolge im Array spielt keine Rolle, alle Array-Elemente werden observiert.

Spread syntax ist also falsch. Keine Ahnung, wie ich auf den Gedanken kam.

Was aber noch nicht erklärt, warum im Codepen das erste Array-Element observiert wird, in der Vue-Anwendung aber nicht. Oder doch:

Vue ist Typescript, vielleicht greift da der TS-Precompiler ein, weil er die Methodensignatur von observe besser kennt als Du?

Vue verwendet intern TypeScript, auch wenn wir selbst gewöhnliches JavaScript schreiben?

---

Im Codepen funktioniert es doch auch nicht. Mach den Darstellungsbereich mal niedriger als den Footer.

Oder den Footer höher als den Darstellungsbereich.

Sobald der aside rausrollt, erscheint die Überschrift wieder. Frage ist aber, ob das ein relevanter Usecase ist, ein solcher Viewport ist schon sehr klein.

In the real thing können die Elemente durchaus höher werden; also ist es ein relevanter Usecase, da muss ich nochmal ran.

Geht das dann überhaupt mit IntersectionObserver? Oder muss ich da mit der Scroll-Position ran? 🤔

Kwakoni Yiquan