Warum wird die Höhe des geladenen Inhalts über AJAX infinity scroll nach dem Laden nicht korrekt gemessen?

Ich lade Beiträge, die aus Bildern oder Videos bestehen, mit infinity scroll (implementiert über AJAX) in das Hauptdiv meiner Website ein. Das System funktioniert so ziemlich wie auf jeder beliebten Meme-Website.

Das Problem: Jeder Beitrag hat links einen Body-Bereich und rechts einen Social-Button-Container. Ich möchte, dass sich der Social-Button-Container neben dem Text des Posts bewegt, während der Benutzer scrollt, und am unteren Rand des Eltern-Divs anhalten, damit sie es mögen, wenn sie den unteren Rand des Posts erreichen. Das Problem ist, dass einige der Posts, die durch meine AJAX-Bildlauffunktion geladen werden, die Elternhöhe nicht korrekt zu berechnen scheinen und sie sich nie direkt zum unteren Teil des übergeordneten div bewegen oder springen Das Browserfenster erreicht sie. Hier ist eine visuelle Illustration des gewünschten Verhaltens.

Implementierung: Ich konnte kein funktionierendes jsFiddle kompilieren, das das Verhalten der AJAX-Anfragen beim Laden von Bildern und Videos in Kombination mit den "Scroll" -Aufrufen simuliert. Hier sind meine Implementierungs- und Debugging-Versuche:

Jeder Artikel hat die folgende Struktur:

Nachdem jede AJAX-Anfrage abgeschlossen ist, versuche ich mit 'scroll' zu arbeiten, um jede der Positionen der Social-Button-Container zu bestimmen und sie zu modifizieren, während der Benutzer mit ajaxComplete () scrollt:

Debugging und Hinweise: Die Scroll-Funktion funktioniert nach der ersten AJAX-Anfrage einwandfrei, bricht aber später etwas ab, da einige .social-buttons-right nicht folgen entlang des Artikelkörpers oder direkt während des Seitenumbrüchens zum unteren Teil des übergeordneten div springen.

Als ich die Elemente, die sich schlecht benehmen, inspiziert habe, habe ich festgestellt, dass sie alle das ".following" haben, was bedeutet, dass die scroll-Funktion sie gefunden hat, aber sie bekommen auch eine schlechte Mischung der css-Eigenschaften, die bind_sticky_boxes ihnen gibt / p>

Dies führt zu der Annahme, dass es etwas mit der Höhenberechnung während der Bildauslastung zu tun hat. Daher habe ich requestanimationframe () verwendet, um etwas zu warten, und setTimeout (function () {..}, 2000), um den Bildlauf auszulösen bind noch später. Keines davon löste das Problem wirklich (letzteres war sowieso keine Lösung). Ich habe auch versucht, die AJAX-Anfragen etwas früher auszulösen, aber das schien aus irgendeinem Grund eine noch schlimmere Wirkung zu haben.

Update: Ich bin jetzt davon überzeugt, dass das Problem mit der Berechnung der Elternhöhe zusammenhängt. Ich tauschte die css-Eigenschaften für eindeutige Klassen mit den gleichen Attributen und bemerkte, dass die Klassenänderung für Elemente, die sich schlecht benehmen, fast immer am Anfang des Eltern-Divs auftritt, was meiner Meinung nach ein starkes Anzeichen dafür ist, dass die Höhe danach nicht richtig berechnet wird Anhängen an das Hauptdiv.

In Bezug auf meine Unendlichkeitsrolle. Ich schließe das ganze AJAX nicht mit ein, da ich nicht glaube, dass es genau mit dem Thema zusammenhängt. Aber ich füge den Inhalt dem Hauptdiv auf diese Weise hinzu:

Nachdem die Seite fertig geladen ist, starte ich meinen unendlich scroll. AJAX-Anforderungen werden ausgelöst, wenn der Benutzer das Element mit der ID load-more-posts erreicht, das sich unterhalb des Hauptwrappers befindet.

});