nicht angemeldet
Rolf BHallo Nico R.,
Ein IntersectionObserver kann entweder prüfen, ob sich zwei Elemente überschneiden (oder auch nicht), oder er kann prüfen, ob ein Element im Viewport ist (oder auch nicht).
Den body zu überwachen bringt nichts, weil der eigentlich immer im Viewport ist. Deswegen braucht man, um das „weit genug nach unten gescrollt“ zu erkennen, so etwas wie ein „Sensor-Element“. Gunnar hatte dazu einen Link auf einen Link zu einem Beispiel gemacht. Hier.
Der naive Ansatz ist, am oberen Rand des Inhalts ein leeres div mit Höhe 0 zu platzieren und es als Sensor-Element zu verwenden. Man dem Observer ein root von null (d.h. den Viewport), einen rootMargin von 100px (damit man 100px Luft hat, bis der Viewport als "verlassen" gilt und als threshold wählt man 0.
Im "unverscrollten" Zustand ist das Sensor-div auf Höhe 0. Beginnt man, nach unten zu scrollen, wandert es in Richtung -100px, bis es irgendwann darüber hinaus ist. In dem Moment wechselt das intersectionRatio auf 0 und der Observer ruft den Callback auf.
Gunnars „Verbesserung“ war, das HTML nicht durch ein Sensorelement vollzumüllen, sondern ein Element zu nehmen, das eh schon da ist: head. head ist normalerweise auf display:none gesetzt, was es auch vor einem Observer versteckt, aber das kann man ja ändern:
head { display: block; }
head > * { display: none; }
Damit ist head sichtbar und sein Inhalt versteckt und nun kann das head-Element als Sensor dienen.
Verbesserung in Anführungszeichen – man kann über das Zweckentfremden des head als Scroll-Sensor durchaus diskutieren. Was nicht heißt, dass ich das gleich zum Bockmist erkläre, aber ein Prinzip von sauberem Code ist: verwende Dinge ihrer Bestimmung gemäß. Aus meiner Sicht ist <head> nicht dazu bestimmt, irgendwo sichtbar zu sein, auch nicht mit Höhe 0.
Aber ein weiteres Prinzip ist: Vermeide Markup, das nicht für den Inhalt wichtig ist. Diese beiden Prinzipien stehen hier im Konflikt, und verschiedene Leute wählen verschiedene Lösungen für Zielkonflikte. Ich hätte wohl ein Sensor-div verwendet. Gunnar hat anders entschieden. Aber Gunnar ist halt auch ein Code-Golfer 😉.
Rolf
sumpsi - posui - obstruxi
MudGuard
Gunnar Bittersmann
JürgenB