Ich habe einen ähnlichen Code wie:
%Vor%div.main ist immer sichtbar (feste Höhe) und div.details "entfaltet / faltet" unter div.main , wenn der Benutzer auf result div klickt. Wenn #results scrollHeight größer als #right-column height ist, möchte ich eine kontinuierliche Scroll-Schleife erstellen.
In diesem Fall würde Scrollen nach #result50 #result1 anzeigen, scrollen, bevor #result1 #result50 anzeigen würde.
Ich kann nicht .append() das erste untergeordnete Kind, da in einigen Fällen ein Teil von result oben und unten in der Spalte zu sehen ist.
Ich kann ein result nicht duplizieren, wenn ich nicht feststelle, ob .details entfaltet / gefaltet ist.
Die Tatsache, dass sich die Höhe von result ändern kann, wenn ein Benutzer das .details div entfaltet, macht es noch komplizierter ...
Hier ist ein Beispiel für eine kontinuierliche Scroll-Schleife (2 Spalten):
Irgendwelche Hinweise / Ideen, wie ich es machen könnte?
Sie können jQuerys .append() und .prepend() auf verschieben Elemente verwenden, ohne sie zu klonen.
Sie werden ähnliche Techniken wie das infinite Scrolling mit Lazy Loading (AJAX) verwenden, aber in diesem Szenario wollen Sie sowohl nach oben als auch nach unten blättern. Anstatt neue Inhalte vom Server zu laden, recyceln Sie nur existierende DOM-Elemente in der Liste.
Im Folgenden zeige ich eine Technik. Ich speichere die Bildlaufposition im .data -Cache des Elements, um sie bei der Erkennung der Bildlaufrichtung leichter abrufen zu können. Ich entschied mich für die Scrollrichtung, um unnötige Variablenzuweisungen im Voraus zu vermeiden, um die Leistung zu verbessern. Sonst würden Sie Elemente erhalten und Mathe für ein Scroll-Ereignis, das nicht in dieser Richtung passieren wird.
Der Scroll-Handler:
%Vor%Ein vollständiges funktionierendes Beispiel:
Ein vollständiges funktionierendes Beispiel für CodePen , wenn Sie möchten.
Tags und Links javascript jquery scroll infinite-scroll