javascript - An welchem Punkt wird scrollHeight berechnet

Ich versuche, eine CSS-Transition mit einem Akkordeon-Element, das ich mit Angular 7 entwickle, zum Laufen zu bringen, für den Fall, dass sich der untere Teil erweitert. Da ich das Element selbst nicht verwenden werde, benutze ich overflow-y: visible;, um sicherzustellen, dass alles, was darin platziert wird, richtig angezeigt wird.

Das bedeutet, dass ich wegen der Verwendung von Overflow max-height anstelle von height für meine Transition verwende. Ich habe gesehen, dass vorgeschlagen wird, um diese Transition mit Overflow zu verwenden, sollte ich max-height weit über das setzen, was es jemals benötigen wird.

Das ist in Ordnung, außer dass die Transition immer diesen Wert verwenden wird und die Animation ziemlich dumm aussehen kann, je nachdem, was ihr Inhalt ist. Um das zu umgehen, dachte ich, ich könnte warten, bis das Element instanziiert ist, seinen Inhalt füllen lassen, seine scrollHeight erfassen und dann diesen als max-height setzen.

Was ich tun kann (und es funktioniert) mit einem setTimeout, das innerhalb von ngAfterViewInit() verwendet wird, aber die scrollHeight wird erst etwa 70 ms später berechnet und definiert (laut einigen Timeout-Tests), während der textContent sofort vorhanden ist.

Es hat mich gerade zum Nachdenken gebracht: Gibt es einen bestimmten Zeitpunkt, an dem scrollHeight berechnet wird, und gibt es eine Möglichkeit, an dieses Ereignis anzuhängen oder so etwas? Ich möchte mich nicht auf einen seltsamen willkürlichen Zeitwert mit setTimeout() verlassen.

Nur eine Konzeptfrage, ich glaube nicht, dass ihr irgendwelchen Code oder so braucht? Danke, Leute

Antwort #1

Änderungen, die an den DOM-Elementen vorgenommen werden, werden nicht sofort angewendet, alle Änderungen am DOM in einem einzelnen Ausführungszyklus werden gesammelt und in einem einzigen Neuzeichnen angewendet.

Sie müssen also warten, bis die Neuzeichnung abgeschlossen ist, bevor Sie versuchen, die aktualisierten Abmessungen des Elements zu lesen.

requestAnimationFrame ist eine Methode, die vor jedem Neuzeichnen ausgeführt wird, wenn du deinen Code so schreibst

element.style.display = 'block';
requestAnimationFrame(() => console.log(element.scrollHeight));

Der Callback wird vor der nächsten Neuzeichnung ausgeführt und Sie sollten die aktualisierte Scrollhöhe erhalten.