Ich suche nach Hilfe / einem Punkt in der richtigen Richtung / oder nach einer Lösung für einen Flicker / Sprung, wenn ich auf einer Looping / unendlichen Webseite scrolle, die in diese Geige .
Was den Sprung verursacht, ist:
" $(window).scrollTop(half_way - child_height); ", und was auch ein ScrollTop-Bug für Chrome-Fenster sein könnte, passiert derzeit jedoch in allen Browsern.
Wenn ich " - child_height " entferne, gibt es kein Flimmern mehr, aber die Seite scrollt nicht mehr richtig, was in diese Geige .
Auch beim ersten Scroll springt die rechte Spalte um drei Felder nach oben - auch wegen ' half_way ', was ich beheben kann, indem ich ein " bottom: -600px; "
Der vollständige Code:
%Vor%Okay - hier ist eine "funktionierende" Version - und mit Werken meine ich weniger Flickerei als vorher. Ich dachte, es wäre flimmerfrei, und es war, als ich im Akkubetrieb war, aber an das Stromnetz angeschlossen war und die CPU schnell genug war, um zu flackern.
Wie ich bereits erwähnt habe, müssen Sie die Objekte klonen, sie manipulieren und dann in das DOM ersetzen, anstatt nur das DOM direkt zu manipulieren.
Ich habe das getan, indem ich den Inhalt von Auch ist es eine gute Idee, nur einmal Dinge im DOM zu finden und von da an einen Verweis auf dieses Objekt zu verwenden, anstatt wiederholt zu suchen. z.B. anstatt: Das Durchsuchen des DOM ist relativ langsam, und das Speichern von Referenzen kann die Leistung verbessern und das Flimmern reduzieren. Wenn Sie das Objekt speichern, wird auch der Code leichter verständlich (imho), da Sie leicht erkennen können, dass Sie auf dasselbe Objekt verweisen und nicht auf verschiedene Dinge. <div id="content"> manipuliere und sie dann in das
Ich flackere immer noch in Chrom auf Windows mit Danack-Lösung. Für diese Seite würde ich das gesamte Scrollen kontrollieren (Sie scrollen bereits manuell eine der Seiten) und geben den Elementen absolute Positionen.
Oder wenn Sie darauf bestehen, den Browser zu scrollen, können Sie Animationen verwenden: animieren Sie die Höhe der letzten Elemente bis 0px, dann appendTo und animato von 0px bis zur normalen Höhe ...
Das könnte ein langer Schuss sein, aber ich hatte das gleiche flackern beim Arbeiten mit infinitescroll, und endete damit, imagesLoaded zu verwenden. Am Ende fügte ich die zusätzlichen Bilder (jetzt geladen) mit einer Einblendung hinzu, und das verhinderte, dass sie flackerten wegen der Tatsache, dass sie geladen wurden.
Vielleicht können Sie das Flackern lösen, indem Sie die geladenen Bilder verwenden - oder einen Rückruf auf den Bildern. Es verringert jedoch die Geschwindigkeit. Ich kann mir vorstellen, dass, wenn Sie so schnell wie möglich durch alles blättern wollen, dies möglicherweise nicht die Lösung ist. Viel Glück!
Eine Lösung wäre, die native Scrollfunktion nicht zu verwenden, sondern das Scrollen zu simulieren. Dies geschieht, indem Sie% code% Ihres Inhalts zusätzlich auf "versteckt" setzen, indem Sie das Ereignis "Mausrad" erfassen und beim Aufruf eine Aktion auslösen. Ich fing an, dies hier hier auszuprobieren (mit MooTools anstelle von jQuery, da ich mehr Ähnlichkeit damit habe). Es "funktioniert" gerade auf der linken Seite, indem es den oberen Rand des ersten Elements verändert.
Meine nächsten Schritte wären:
Das hat jedoch einige Nachteile. Das simulierte Scrollen ist nicht so natürlich wie die native Scroll-Funktionalität und das Klicken auf das Mausrad funktioniert nicht. Diese könnten lösbar sein, aber es würde etwas mehr Codierung erfordern, damit es reibungslos funktioniert. Wie dem auch sei, am Ende hätten Sie eine Lösung ohne Flimmern und ohne klebrige Bildlaufleiste an der Seite (Eine Idee für einen Ersatz könnte ein kleiner Bereich auf der Seite sein, der beim Mouseover das Scrollen auslöst).
Tags und Links javascript html jquery infinite-scroll