Visualisierung bei overflowing content

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Gesagt, getan …

… aber du willst ja nicht nur bestimmte Elemente (in meinem Beispiel section) prüfen, sondern alle – mit Ausnahme von html und body, bei denen ja normal ist, dass darin gescrollt werden muss. Auch head und alles darin muss nicht überprüft werden, sofern du nicht irgendwas davon anzeigen lässt.

Also den Selektor zu body * geändert (und den Variablennamen angepasst!) – und prompt bekamen in meinem Beispiel auch alle h2-Elemente den roten Rahmen^[1]. Da wurde wohl bei scrollHeight aufgerundet und bei clientHeight abgerundet. Also noch den Schwellenwert für die Differenz um 1 erhöht: overflow detection 4 for all elements.

Um auch nachträglich per JavaScript generierte Elemente in die Prüfung einzubeziehen, müsste man noch einen MutationObserver verwenden. Das überlasse ich jetzt mal dir.

🖖 Живіть довго і процвітайте

PS: Und was sich bislang auch der Prüfung entzieht, sind Pseudoelemente, bei denen ja auch Overflow auftreten könnte. Die überlasse ich auch dir.

---

1. für den Rahmen outline verwenden, nicht border, um das Layout nicht zu ändern ↩︎