Für eine andere Frage habe ich diese Antwort einschließlich dieses Beispielcodes verfasst .
In diesem Code verwende ich das Mausrad, um eine HTML5-Leinwand zu vergrößern oder zu verkleinern. Ich habe Code gefunden, der Geschwindigkeitsunterschiede zwischen Chrome und Firefox normalisiert. Die Zoombehandlung in Safari ist jedoch viel, viel schneller als in beiden Fällen.
Hier ist der Code, den ich derzeit habe:
var handleScroll = function(e){
var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
if (delta) ...
return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false); // Everyone else
Welchen Code kann ich verwenden, um den gleichen Delta-Wert für die gleiche Menge an Mausrad zu erhalten, die in Chrome v10 / 11, Firefox v4, Safari v5, Opera v11 und IE9 rollt?
Diese Frage ist verwandt, hat aber keine gute Antwort.
Bearbeiten : Weitere Untersuchungen zeigen, dass ein Bildlaufereignis 'up' ist:
| evt.wheelDelta | evt.detail ------------------ + ---------------- + ------------ Safari v5 / Win7 | 120 | 0 Safari v5 / OS X | 120 | 0 Safari v7 / OS X | 12 | 0 Chrome v11 / Win7 | 120 | 0 Chrome v37 / Win7 | 120 | 0 Chrome v11 / OS X | 3 (!) | 0 (möglicherweise falsch) Chrome v37 / OS X | 120 | 0 IE9 / Win7 | 120 | nicht definiert Opera v11 / OS X | 40 | -1 Opera v24 / OS X | 120 | 0 Opera v11 / Win7 | 120 | -3 Firefox v4 / Win7 | undefiniert | -3 Firefox v4 / OS X | undefiniert | -1 Firefox v30 / OS X | undefiniert | -1
Darüber hinaus liefert die Verwendung des MacBook-Trackpads unter OS X auch bei langsamer Bewegung unterschiedliche Ergebnisse:
- Bei Safari und Chrome ist der
wheelDelta
Wert 3 anstelle von 120 für das Mausrad. - Bei Firefox
detail
ist dies normalerweise2
manchmal der Fall1
, aber wenn Sie sehr langsam scrollen, wird KEIN EVENT-HANDLER GEFEUERT .
Die Frage ist also:
Was ist der beste Weg, um dieses Verhalten zu unterscheiden (idealerweise ohne Benutzeragenten oder Betriebssystem-Sniffing)?
quelle
e.wheelDelta/120
?Antworten:
Bearbeiten Sie September 2014
Vorausgesetzt, dass:
… Ich kann nur empfehlen, diesen einfachen, zeichenbasierten Zählcode zu verwenden:
Der ursprüngliche Versuch, korrekt zu sein, folgt.
Hier ist mein erster Versuch eines Skripts, die Werte zu normalisieren. Es hat zwei Fehler unter OS X: Firefox unter OS X erzeugt Werte 1/3, die sie sein sollten, und Chrome unter OS X erzeugt Werte 1/40, die sie sein sollten.
Sie können diesen Code in Ihrem eigenen Browser hier testen: http://phrogz.net/JS/wheeldelta.html
Vorschläge zum Erkennen und Verbessern des Verhaltens unter Firefox und Chrome unter OS X sind willkommen.
Bearbeiten : Ein Vorschlag von @Tom besteht darin, jeden Ereignisaufruf einfach als einzelne Bewegung zu zählen und ihn anhand des Vorzeichens der Entfernung anzupassen. Dies führt unter OS X weder zu reibungslosen / beschleunigten Bildlaufvorgängen noch zu perfekten Fällen, wenn das Mausrad sehr schnell bewegt wird (z. B.
wheelDelta
240), aber diese treten nur selten auf. Dieser Code ist aus den dort beschriebenen Gründen jetzt die empfohlene Technik, die oben in dieser Antwort aufgeführt ist.quelle
(((evt.deltaY <0 || evt.wheelDelta>0) || evt.deltaY < 0) ? 1 : -1)
nicht sicher, was die Qualitätssicherung damit herausfindet.Hier ist mein verrückter Versuch, ein browserübergreifendes kohärentes und normalisiertes Delta (-1 <= Delta <= 1) zu erzeugen:
Dies ist völlig empirisch, funktioniert aber unter Safari 6, FF 16, Opera 12 (OS X) und IE 7 unter XP recht gut
quelle
event
-object ino
?o
Variable soll zeigen, dass das ursprüngliche Ereignis und nicht ein umschlossenes Ereignis wie jQuery oder andere Bibliotheken an Ereignishandler übergeben werden sollen.Unsere Freunde bei Facebook haben eine großartige Lösung für dieses Problem zusammengestellt.
Ich habe an einer Datentabelle getestet, die ich mit React erstelle, und sie rollt wie Butter!
Diese Lösung funktioniert in einer Vielzahl von Browsern unter Windows / Mac und beide mit Trackpad / Maus.
Den Quellcode finden Sie hier: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
quelle
Ich habe eine Tabelle mit unterschiedlichen Werten erstellt, die von verschiedenen Ereignissen / Browsern zurückgegeben wurden, wobei das DOM3-
wheel
Ereignis berücksichtigt wurde, das einige Browser bereits unterstützen (Tabelle unter).Basierend darauf habe ich diese Funktion gemacht, um die Geschwindigkeit zu normalisieren:
http://jsfiddle.net/mfe8J/1/
Tabelle für
mousewheel
,wheel
undDOMMouseScroll
Ereignisse:quelle
Eine weitere mehr oder weniger eigenständige Lösung ...
Dies berücksichtigt jedoch keine Zeit zwischen Ereignissen. Einige Browser scheinen Ereignisse immer mit demselben Delta auszulösen und lösen sie nur schneller aus, wenn Sie schnell scrollen. Andere variieren die Deltas. Man kann sich einen adaptiven Normalisierer vorstellen, der Zeit berücksichtigt, der jedoch etwas kompliziert und umständlich zu bedienen ist.
Arbeiten hier verfügbar: jsbin / iqafek / 2
quelle
Einfache und funktionierende Lösung:
quelle
Registrieren Sie sich für die Zoomunterstützung auf Touch-Geräten für die Ereignisse "Gestenstart", "Gestenwechsel" und "Gestenende" und verwenden Sie die Eigenschaft "event.scale". Sie können Beispielcode dafür sehen.
Für Firefox 17
onwheel
ist geplant, dass die Veranstaltung von Desktop- und Mobilversionen unterstützt wird (gemäß den MDN-Dokumenten auf dem Rad ). Auch für Firefox ist möglicherweise das Gecko-spezifischeMozMousePixelScroll
Ereignis nützlich (obwohl dies vermutlich jetzt veraltet ist, da das DOMMouseWheel-Ereignis jetzt in Firefox veraltet ist).Unter Windows scheint der Treiber selbst die Ereignisse WM_MOUSEWHEEL, WM_MOUSEHWHEEL (und möglicherweise das Ereignis WM_GESTURE für das Touchpad-Schwenken?) Zu generieren. Dies würde erklären, warum Windows oder der Browser die Mausrad-Ereigniswerte selbst nicht zu normalisieren scheinen (und möglicherweise bedeuten, dass Sie keinen zuverlässigen Code zum Normalisieren der Werte schreiben können).
Für die Ereignisunterstützung
onwheel
( nicht am Mausrad) in Internet Explorer für IE9 und IE10 können Sie auch das W3C-Standardereignis verwendenonwheel
. Eine Kerbe kann jedoch ein anderer Wert als 120 sein (z. B. wird eine einzelne Kerbe auf meiner Maus auf dieser Testseite zu 111 (anstelle von -120) ). Ich habe einen weiteren Artikel mit anderen Details zu Radereignissen geschrieben, die relevant sein könnten.Grundsätzlich habe ich bei meinen eigenen Tests auf Radereignisse (ich versuche, die Werte für das Scrollen zu normalisieren) festgestellt, dass ich unterschiedliche Werte für Betriebssystem, Browserhersteller, Browserversion, Ereignistyp und Gerät erhalte (Microsoft-Neigungsradmaus, Laptop-Touchpad-Gesten) , Laptop-Touchpad mit Scrollzone, Apple Magic Mouse, Apple Mighty Mouse Scrollball, Mac Touchpad usw. usw.).
Außerdem müssen verschiedene Nebenwirkungen der Browserkonfiguration (z. B. Firefox mousewheel.enable_pixel_scrolling, chrome --scroll-pixels = 150), der Treibereinstellungen (z. B. Synaptics Touchpad) und der Betriebssystemkonfiguration (Windows-Mauseinstellungen, OSX-Mauseinstellungen,) ignoriert werden. X.org-Tasteneinstellungen).
quelle
Dies ist ein Problem, mit dem ich heute seit einigen Stunden kämpfe und nicht zum ersten Mal :(
Ich habe versucht, Werte über einen "Wisch" zusammenzufassen und zu sehen, wie verschiedene Browser Werte melden, und sie variieren stark. Safari meldet auf fast allen Plattformen um Größenordnungen größere Zahlen, Chrome meldet deutlich mehr (etwa dreimal mehr) ) als Firefox, Firefox ist auf lange Sicht ausgeglichen, unterscheidet sich jedoch stark von Plattformen mit kleinen Bewegungen (auf dem Ubuntu-Gnom scheinen fast nur +3 oder -3 kleinere Ereignisse zusammenzufassen und dann ein großes "+3" zu senden).
Derzeit werden drei Lösungen gefunden:
Die Idee in Qooxdoo ist gut und funktioniert und ist die einzige Lösung, die ich derzeit als vollständig konsistenten Cross-Browser-Lösung gefunden habe.
Leider neigt es dazu, auch die Beschleunigung zu renormieren. Wenn Sie es versuchen (in ihren Demos) und eine Weile mit maximaler Geschwindigkeit auf und ab scrollen, werden Sie feststellen, dass das Scrollen extrem schnell oder extrem langsam im Grunde fast die gleiche Menge an Bewegung erzeugt. Im Gegenteil, wenn Sie die Seite neu laden und nur sehr langsam wischen, werden Sie feststellen, dass sie ziemlich schnell scrollt. "
Dies ist frustrierend für einen Mac-Benutzer (wie mich), der kräftige Scroll-Swipes auf dem Touchpad ausführt und erwartet, oben oder unten auf das gescrollte Objekt zu gelangen.
Da die Mausgeschwindigkeit auf der Grundlage des erzielten Maximalwerts verringert wird, verlangsamt sich die Geschwindigkeit umso mehr, je mehr Ihr Benutzer versucht, sie zu beschleunigen, während ein Benutzer mit "langsamem Bildlauf" recht hohe Geschwindigkeiten aufweist.
Dies macht diese (ansonsten brillante) Lösung zu einer etwas besseren Implementierung von Lösung 1.
Ich habe die Lösung auf das jquery-Mausrad-Plugin portiert: http://jsfiddle.net/SimoneGianni/pXzVv/
Wenn Sie eine Weile damit spielen, werden Sie feststellen, dass Sie ziemlich homogene Ergebnisse erzielen, aber Sie werden auch feststellen, dass es ziemlich schnell zu + 1 / -1-Werten tendiert.
Ich arbeite jetzt daran, es zu verbessern, um Spitzen besser zu erkennen, damit nicht alles "außerhalb des Maßstabs" gesendet wird. Es wäre auch schön, auch einen Float-Wert zwischen 0 und 1 als Delta-Wert zu erhalten, damit eine kohärente Ausgabe erfolgt.
quelle
Es gibt definitiv keine einfache Möglichkeit, alle Benutzer in allen Betriebssystemen in allen Browsern zu normalisieren.
Es wird schlimmer als die aufgelisteten Varianten - bei meinem Windows XP + Firefox3.6-Setup macht mein Mausrad 6 pro Ein-Stufen-Bildlauf - wahrscheinlich, weil ich irgendwo vergessen habe, dass ich das Mausrad beschleunigt habe, entweder im Betriebssystem oder irgendwo in ungefähr: config
Ich arbeite jedoch an einem ähnlichen Problem (übrigens mit einer ähnlichen App, aber ohne Canvas), und es fällt mir ein, wenn ich nur das Delta-Zeichen von +1 / -1 verwende und das letzte Mal im Laufe der Zeit messe eine Beschleunigungsrate haben, dh. wenn jemand in wenigen Augenblicken einmal gegen mehrmals scrollt (was ich würde wetten, wie Google Maps tut es).
Das Konzept scheint in meinen Tests gut zu funktionieren. Lassen Sie einfach weniger als 100 ms die Beschleunigung erhöhen.
quelle
quelle