Intersection Observer

[Matthias Scharwies]

Guten Abend,

[...] denn meine Seiten versuche ich schon, so gut wie möglich schlank zu halten.

Sehr gut! Auch wenn andere Webseiten über 120MB ausliefern, ist das doch das Ideal, das wir anstreben.

Weil ich ja die Scrollposition überwachen will. Ich wusste nicht, dass das auch per CSS geht.

Da wäre der erste Grundsatz, den man erwähnen, bzw. beachten sollte:

• HTML/Tutorials/Trennung von Inhalt, Präsentation und Verhalten

Nimm für die Darstellung CSS. Da geht fast alles mit Media Queries oder eben in Ausnahmefällen mit JavaScript, z.B. windows.matchMedià oder dem Intersection Observer.

Ich werde mir noch nochmal die Sache mit diesem IntersectionObserver anschauen.

Hier ist ein Beispiel im Wiki:

• OnePager/Komfort-Version#Intersection_Observer_API

Das Ganze müsste man noch ausbauen, bzw. von einem anderen Blickwinkel (anderes Beispiel) aus betrachten.

Ich habe aber nicht den Eindruck, dass mein Browser mit dem Abhorchen des scroll-EventListeners Probleme hat.

Achtung Der Wurm muss dem Fisch und nicht dem Angler schmecken! ^[1] Wenn du auf dem Zeltplatz mit Handy und schlechtem Netz unterwegs bist, …

Und da sind wir wieder bei der ersten Aussage:

[...] denn meine Seiten versuche ich schon, so gut wie möglich schlank zu halten.

Lass Deine Schleife nicht über jede Pixeländerung 1000x drüber laufen, sondern frage ab, wann der bestimmte Punkt erreicht ist.

---

Ich werde die Wiki-Seiten zu den scroll-Eigenschaften die Tage mit einem Link zum Intersection Observer ergänzen.

Herzliche Grüße

Matthias Scharwies

---

1. Geklaut zitiert von @Gunnar Bittersmann ↩︎