nicht angemeldet
Hi Raoul!
Kein schlechter Gedanke, aber das wird nicht verlässlich funktionieren. Wenn man mit JavaScript eine HTML-Klasse vergibt, dann unternimmt der Browser sofort einen blockierenden Reflow.
So dachte ich bisher auch. Scheint aber in meinem Fall (durch die per JS zugewiesene Klasse erhält das betreffende Element einen Multi-Column Style) nicht so zu sein. Der Browser braucht anscheinend für eine gewisse Zeit für die Berechnung und Umsetzung (ohne zwischenzeitliche Blockade).
Ich vermute, dass du die Klassenzuweisung und das Auslesen der Abmessungen nicht in einem Run-To-Completion-Codeblock ausführst, sondern verteilt über asynchrone Funktionsaufrufe hinweg.
Du weißt doch, dass ich JS Laie bin - wirf' mir doch bitte nicht solche "Fachbegriffe" an den Kopf! ;-)
Ursprünglich wollte ich das schlicht in meiner $(document).ready(function(){}) machen.
setTimeout() wird hier also nicht den gewünschten Effekt haben (zumindest kann man sich darauf nicht verlassen). Das Positive daran ist, dass man setTimeout gar nicht benötigte, wie gesagt, findet der Reflow blockierend und unmittelbar in Folge der DOM-Manipulation statt, es ist möglich mit der nächsten Anweisung sofort die neuen Abmessungen auszulesen.
Das halte ich bis zum Beweis des Gegenteils erstmal für ein Gerücht ...! ;-)
Du hast schon das "jQuery" im Betreff gelesen? :-P Aber nun gut, das tut der Sache ja keinen Abbruch. Aber den Umstand, dass ich ja extra geschrieben habe, dass dann ein Multi-Column Style auf das Element angewendet wird, könnte doch von Bedeutung für das "Problem/ Phänomen" sein, oder nicht? Denn bisher wäre mir zumindest noch nicht aufgefallen, dass ich ein solches Problem gehabt hätte. Sondern ich bin bisher auch immer davon ausgegangen, dass es sich so wie von dir geschildert verhält.
Hab' ich bis jetzt nur mal übeerflogen.
Das führt natürlich zu der Frage, warum der TO trotzdem ein Szenario beobachtet hat, in dem das nicht der Fall zu sein schien. Das Mysterium können wir nur lüften, wenn wir den fraglichen Code zu Gesicht bekommen.
Können wir uns gerne mal per Mail drüber austauschen ;-)
Für Privatnachhilfe stehe ich nicht zur Verfügunge,
Schon klar - und von Nachhilfe war auch nicht die Rede ...! :-P
lass uns das hier im öffentlichen Raum machen, so können auch andere davon profitieren. Niemand erwartet von dir, dass du deinen gesamten Code publik machst, es genügt ein reduziertes Beispiel, an dem wir das von dir beobachtete Verhalten, reproduzieren können.
Reduziertes Beispiel ist immer so eine Sache ..., wenn bei der Reduktion auch das "Problem" verschwindet.
Und es ist ein Teil in einem etwas umfangreicheren Layout, das u.a. (in dem relevanten Teil) Flexbox Elemente, absolut positionierte Elemente und dann eben auch das Multi-Column Element enthält.
Ich denke, du kannst dir ungefähr vorstellen, dass ich da nicht mal eben ein entsprechendes Beispiel erstellen kann.
Ich teste mal, ob ich das "Problem" auch mit weniger Aufwand reproduzierbar in einem Fiddle nachbauen kann - bitte etwas Geduld.
Vielleicht habe ich ja auch im grundsätzlichen gedanklichen Ansatz einen "Fehler"?
Im Prinzip handelt es sich um einen äußeren Container (DIV) und einen inneren (DIV). Wenn jetzt die Höhe des äußeren Containers (Annahme: 100vh) nicht ausreicht, damit der innere Container (variabele Höhe - abhängig vom Inhalt) vollständig ohne Überlauf aufzunehmen, dann weise ich dem inneren Container per JS eine zusätzliche Klasse im Attribut zu. Dadurch kommt ein Multi-Column Style zur Anwendung, welches den Inhalt halt "automatisch" auf die benötigte Anzahl von Spalten aufteilt. Jetzt muss ich wissen, wie breit (width) das Element dadurch geworden ist, weil ich diesen Wert wiederum explizit als width: xy px dem Element zuweisen muss (weil overflow: hidden damit keine Scollbar da ist - geblättert wird per margin-left).
In meiner "Ahnungslosigkeit habe ich das halt so versucht:
var scrollParent = $('#outer');
var scrollElement = $('#inner');
var baseHeight = scrollParent.prop('clientHeight');
var scrolledHeight = scrollElement.prop('scrollHeight');
var baseWidth = scrollElement.width();
if(scrolledHeight > baseHeight) {
scrollParent.addClass('scroll');
var scrolledWidth = scrollElement.prop('scrollWidth');
console.log("baseWidth: " + baseWidth);
console.log("scrolledWidth: " + scrolledWidth);
}
scrolledWidth liefert dann zwar einen anderen Wert als baseWidth, ist aber nicht die tatsächliche Breite des Elements. Diese erhalte ich (zuverlässig) erst, wenn ich es in eine externe Funktion auslagere, und auch dann braucht es noch eine setTimeout() Funktion, damit es "funktioniert".
Gruß Gunther
Camping_RIDER
Matthias Apsel
Gunnar Bittersmann