Visualisierung bei overflowing content bearbeitet von Gunnar Bittersmann 09.02.2023 07:23 @@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](https://codepen.io/gunnarbittersmann/pen/bGjPbpQ){:@en}.Um auch nachträgliche per JavaScript generierte Elemente in die Prüfung einzubeziehen, müsste man noch einen MutationObserver verwenden. Das überlasse ich jetzt mal dir.[^1]: für den Rahmen `outline`{:.good} verwenden, nicht `border`{:.bad}, um das Layout nicht zu ändern🖖 Живіть довго і процвітайте{:@uk}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.-- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter
Visualisierung bei overflowing content bearbeitet von Gunnar Bittersmann 09.02.2023 07:57 @@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](https://codepen.io/gunnarbittersmann/pen/bGjPbpQ){:@en}.Um auch nachträgliche per JavaScript generierte Elemente in die Prüfung einzubeziehen, müsste man noch einen MutationObserver verwenden. Das überlasse ich jetzt mal dir.[^1]: für den Rahmen `outline`{:.good} verwenden, nicht `border`{:.bad}, um das Layout nicht zu ändern🖖 Живіть довго і процвітайте{:@uk}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.-- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter
Visualisierung bei overflowing content bearbeitet von Gunnar Bittersmann 09.02.2023 07:27 @@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](https://codepen.io/gunnarbittersmann/pen/bGjPbpQ){:@en}. Um auch nachträgliche per JavaScript generierte Elemente in die Prüfung einzubeziehen, müsste man noch einen MutationObserver verwenden. Das überlasse ich jetzt mal dir. [^1]: für den Rahmen `outline`{:.good} verwenden, nicht `border`{:.bad}, um das Layout nicht zu ändern 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter
nicht angemeldet nicht angemeldet
