IntersectionObserver mit root-Element

[Nico R.]

Hallo zusammen,

ich bekomme es irgendwie nicht hin, mit dem IntersectionObserver zwei Elemente aufeinander reagieren zu lassen. Ich habe eine Navigation, die fest steht. Sobald ein Test-DIV die Navigation berührt, soll eine Konsolenausgabe erfolgen.

Hier die Testseite und hier nochmal das grundlegende JS:

const observer = new IntersectionObserver (function (entries) {
  if (entries[0].isIntersecting) {
    console.log("isIntersecting");
  } 
  else {
    console.log("!isIntersecting");		
  }
}, { root: nav, rootMargin: "0px", treshold: 0 } );	

observer.observe(container);	

Die Ausgabe ist immer !isIntersecting, auch wenn ich mit dem Container unter der Navigation hindurch scrolle.

Lasse ich das root: nav weg, beziehe mich also auf den Viewport, reagiert das ganze wie erwartet, also beim ersten Aufruf der Seite: isIntersecting, beim Herausscrollen des Containers: !isIntersecting.

Hab ich das mit dem root-Element falsch verstanden?

Schöne Grüße

Nico