Seltsames / inkonsistentes scrollTop-Verhalten

8

Ich bin auf dieses Thema gestoßen, als ich versuchte, ein Element zu scrollen, ohne die normalen Event-Handler aufzurufen

Wenn ich Firefox und IE10 benutze, sehe ich ein merkwürdiges Verhalten in der Arbeitsweise der scrollTop -Methode. Wenn ich beispielsweise scrollTop für div und aferwards für einen scroll -Ereignishandler auf dasselbe Element festlege, wird der Handler sofort ausgelöst. Aus meinen Tests heraus geschieht das nicht mit Chrome, was mich zu der Annahme verleitet, dass FF und IE die kleinsten Animationen auf ihre Schriftrollen anwenden, oder dies ist eine Art Bug.

>

Siehe JSFiddle-Beispiel . Interessanterweise wird das Problem behoben, wenn ich eine Zeitüberschreitung von 1 ms vor der Zuweisung festlege . Ich würde gerne wissen, was hier vor sich geht, und was der beste Weg ist, es zu beheben.

Update : Aus den Kommentaren unten scheint es, als wäre dies ein normales Verhalten des Browsers. Daher werde ich meine Frage aktualisieren, um zu fragen, was hier passiert - bitte zitieren Sie einige interessante Artikel, die diesen Prozess näher erläutern .

    
Ian Clark 04.11.2013, 11:21
quelle

1 Antwort

8

Was in IE und FF passiert, ist folgendes:

  1. Die Eigenschaft scrollTop wird angepasst
  2. Der Scroll-Ereignishandler wurde hinzugefügt
  3. Die Ausführung der Funktion wird beendet. Jetzt hat der Browser Zeit für andere Dinge und rendert die Seite. Das Rendering bewirkt, dass sowohl der Scroll-Handler als auch die Eigenschaft scrollTop gleichzeitig festgeschrieben werden. Der scrollTop-Wechsel löst somit ein scroll-Ereignis aus, das von Ihrem Handler erfasst wird.

Dies ist anders als dieser Code:

%Vor%

Wo das Folgende hilft:

  1. Die Eigenschaft scrollTop wird angepasst
  2. Die Funktion setTimeout hängt die Funktion an, die den Ereignishandler onscroll der Ereigniswarteschlange hinzufügt. Die Ausführung des Codes wird im Wesentlichen verzögert, bis eine Zeitüberschreitungsverarbeitung stattfindet (siehe auch das neuere window.setImmediate).
  3. Die Ausführung Ihrer Funktion wird beendet. Jetzt hat der Browser Zeit für andere Dinge und rendert die Seite. Das Rendering löst ein Bildlaufereignis aus, aber da Ihre Funktion zurückgestellt wurde, wurde sie noch nicht hinzugefügt, sodass nichts das Bildlaufereignis erfasst.
  4. Die Wiedergabe der Seite wird beendet. Jetzt hat der Browser Zeit für andere Dinge und führt die Funktion aus, die von setTimeout gesetzt wird. Dadurch wird der Ereignishandler onscroll hinzugefügt, aber da das Bildlaufereignis bereits ausgelöst wurde, wird der Ereignishandler nicht aufgerufen.

Weitere Informationen zum Thema finden Sie hier und hier .

    
Borre 08.11.2013, 12:19
quelle