In meiner Seite habe ich zwei Tabellen gleicher Breite, und beide tun horizontale Scroll. Ich muss beide Tabellen auf die gleiche Position setzen, wenn jeder scrollt.
Eigentlich ist mein Code:
%Vor%Es funktioniert. Das Problem ist, dass es Situationen gibt, in denen die geladenen Daten groß genug sind, um den Browser und das Scroll-Ereignis zu verlangsamen.
Dann versuche ich, die Benutzererfahrung in diesen Situationen zu verbessern.
Ich habe dieses Snippet gemacht, wo ich versuche, die Funktion __defineSetter__ von Object :
Wie Sie jedoch sehen können, wird das Snippet ausgeführt. Es setzt undefined auf elementA.scrollLeft und NaN auf elementB.scrollLeft .
Ich hätte gerne eine Anleitung hier, danke für Ihre Zeit.
Scroll-Ereignisse können mit hoher Geschwindigkeit ausgelöst werden, so dass Sie durch das Drosseln des Scroll-Ereignishandlers glatter scrollen können, wie trincot in seiner Antwort sagte. Sie können eine Funktion mit setTimeout drosseln. Wenn ich Dinge auf dem Bildschirm verschiebe oder andere sichtbare Effekte behandle, bevorzuge ich requestAnimationFrame .
requestAnimationFrame führt den Callback vor dem nächsten Repaint aus, so dass der Browser einige Optimierungen vornehmen kann.
Dieser Code bringt Sie näher an die Lösung heran, sie basiert auf diesem Beispiel aus MDN :
%Vor%Sie können den Zeitstempel verwenden, der an den Callback übergeben wird, um die Synchronisation weiter zu entprellen, aber Sie können mit einem etwas trägen Scroll in der zweiten Tabelle enden, wenn Sie zu viel Verzögerung setzen.
Ihr Aufruf an __defineSetter__ ersetzt die Eigenschaft scrollLeft durch eine mit demselben Namen, was bedeutet, dass Sie nicht mehr zur ursprünglichen Eigenschaft gelangen. Sobald Sie __defineSetter__ aufgerufen haben, wird jedes Lesen der Eigenschaft in undefined :
Der Browser ändert auch nicht den Wert scrollLeft über eine Zuweisung, wie dies bei JavaScript der Fall ist. Daher wird die Setter-Funktion während eines Bildlaufereignisses nicht aufgerufen. Sie können dies überprüfen, indem Sie ein console.log in die Setter-Funktion einfügen: Beim Scrollen wird nichts angezeigt:
Aus den beiden oben genannten Gründen besteht keine Hoffnung, dass Sie Scrollen mit __defineSetter__ erfassen können. Sie müssen das scroll -Ereignis wie zuvor hören.
Sie können bessere Ergebnisse erzielen, wenn Sie die Synchronisierung asynchron durchführen und einige der Aktualisierungen überspringen, wenn viele Scroll-Ereignisse auftreten:
%Vor% Wenn der Browser jetzt mehr als ein Bildlaufereignis sofort generiert, löscht das zweite die geplante Aktualisierung von scrollB[0].scrollLeft : Das clearTimeout verhindert, dass dieses Update ausgeführt wird, und das nächste wird stattdessen geplant.
Sie könnten mit dem Verzögerungsargument von setTimeout spielen, um die richtige Balance zu finden:
Wenn Sie die Verzögerung erhöhen, wird verhindert, dass Ereignisse sich stapeln, und scrollB synchronisiert sich dann reaktionsschneller, aber es werden weniger Aktualisierungen an den scrollB vorgenommen scrollLeft Eigenschaft, die es weniger fließend scrollen lässt.
Tu es nicht. Mach es zu einem Tisch. Halte es einfach. Siehe Beispiel.
Tags und Links javascript scroll performance