Ich entwickle eine Seite mit jQuery, GreenSock und Scollorama.
Es muss nicht unbedingt mobile Browser unterstützen , aber es wäre schön, wenn es auf dem iPad funktionieren würde - also habe ich angefangen, auf verschiedenen Handys und Tablets zu testen.
>Das Problem, auf das ich gestoßen bin, ist, dass Scrollorama davon ausgeht, dass das Scroll-Ereignis ziemlich oft ausgelöst wird, da die Animationen darin eingebunden sind. Bei Verwendung eines Touchscreens scheinen die Browser das scroll-Ereignis jedoch nur beim Start auszulösen den Ziehvorgang und wenn Sie anhalten - das ist konsistent über Opera Mini, Chrome, Safari, FF Mobile.
Damit meine Seite zumindest teilweise funktioniert, muss ich mir etwas einfallen lassen, mit dem ich das Scroll-Ereignis öfter abfeuern kann - weiß jemand wie?
PS Ich habe versucht, iScroll zu verwenden, wie die Scrollorama-Dokumentation suggeriert, aber das hat nicht funktioniert und stattdessen die Animationen zerstört und das Scrollen unmöglich gemacht - ich bin mir sicher, dass das Plugin selbst funktioniert, aber es scheint nicht gut zu funktionieren was ich schon habe. Ich suche nach etwas weniger Beteiligten als ein Plugin, nur ein Ausschnitt, um das Scroll-Ereignis ideal auszulösen.
TL; DR
Geräte mit Touchscreens scheinen das Javascript-Scroll-Ereignis nur einmal oder zweimal während eines Ziehens auszulösen. Gibt es einen einfachen Patch, den ich in JS oder jQuery machen kann, der das Scroll-Ereignis öfter auslöst?
Update: Ich habe versucht, mich in die Touch-Ereignisse einzuklinken und den Browser so mit ihnen zu scrollen:
%Vor%Dies schien mir bessere Ergebnisse bei Android mit Firefox zu bringen, obwohl ich nicht glaube, dass es so oft zündet, wie es mir lieber wäre als nichts.
Ich werde in anderen Browsern testen und sehen, ob das hilft.
Update 2:
Der obige Code half bei FF auf Android, aber nicht bei iPhone. Ich habe versucht, Handler für Gestenereignisse hinzuzufügen, die das iPhone auslöst, aber keine Änderung.
%Vor%Pre-iOS 8:
Es ist kein Problem, dass das scroll-Ereignis ausreichend ausgelöst wird. Stattdessen beenden Browser unter iOS das Auffrischen (d. H. "Neuanlegen") des Bildschirms, während sie sich in der Mitte einer Bildlaufgeste befinden.
Safari WebKit, die HTML-Rendering-Komponente, die in allen iOS-Browsern gemäß den Richtlinien von Apple obligatorisch verwendet wird, hält das Neuzeichnen während der Scroll-Gesten an, um die Akkulaufzeit zu verlängern und die Wärme zu reduzieren. Beachten Sie, dass JavaScript während einer Bildlaufgeste weiterhin normal im Hintergrund funktioniert, auch wenn der Bildschirm keine Echtzeitänderungen wiedergeben kann, die während einer Bildlaufgeste am DOM vorgenommen wurden. Sobald die Geste endet, wird sofort ein Paint-Ereignis ausgelöst und der Bildschirm wird aktualisiert. Timer-Loops, z. B. solche, die über setInterval eingerichtet werden, werden jedoch nicht während Scroll-Gesten ausgelöst.
Es ist auch erwähnenswert, dass die Scroll-Geste erst wirksam wird, wenn Sie Ihren Finger ungefähr 10 Pixel von seiner Startposition entfernt bewegen, wenn Sie Ihre Finger sehr langsam bewegen, wenn Sie einen Scroll auslösen. Während der Bewegung innerhalb dieses 10-Pixel-Radius wird der Bildschirm sofort aktualisiert. In dem Moment, in dem WebKit entscheidet, dass sich Ihr Finger weit genug bewegt hat, um das Scrollen zu initiieren, werden Bildschirmaktualisierungen deaktiviert, bis die Scroll-Geste endet.
Der Grund, warum dieses Problem nicht "einige" Webseiten oder JavaScript-Bibliotheken betrifft, besteht darin, dass sie das Scrollen der Seite "einfrieren" und stattdessen das Scrollen durch Abfangen von Berührungsereignissen emulieren und dann die Eigenschaft body.scrollTop entsprechend anpassen. Sie fixieren den Bildlauf der Seite, indem sie dem Ereignis onscroll einen Ereignishandler hinzufügen und einen Befehl event.preventDefault() innerhalb des Ereignishandlers ausgeben.
iOS 8 und höher:
Apple macht das Scroll-Event in iOS 8 flüssiger:
Tags und Links javascript android scroll ios