Normalisierung der Mausradgeschwindigkeit über alle Browser hinweg

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 wheelDeltaWert 3 anstelle von 120 für das Mausrad.
• Bei Firefox detailist dies normalerweise 2manchmal 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)?

Bearbeiten Sie September 2014

Vorausgesetzt, dass:

• Verschiedene Versionen desselben Browsers unter OS X haben in der Vergangenheit unterschiedliche Werte geliefert und können dies auch in Zukunft tun
• Mit dem Trackpad auf OS X liefert sehr ähnliche Effekte zu einem Mausrad verwenden, doch gibt sehr unterschiedliche Ereigniswerte , und doch ist die Vorrichtung Differenz kann nicht von JS nachgewiesen werden

… Ich kann nur empfehlen, diesen einfachen, zeichenbasierten Zählcode zu verwenden:

var handleScroll = function(evt){
  if (!evt) evt = event;
  var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;
  // Use the value as you will
};
someEl.addEventListener('DOMMouseScroll',handleScroll,false); // for Firefox
someEl.addEventListener('mousewheel',    handleScroll,false); // for everyone else

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.

// Returns +1 for a single wheel roll 'up', -1 for a single roll 'down'
var wheelDistance = function(evt){
  if (!evt) evt = event;
  var w=evt.wheelDelta, d=evt.detail;
  if (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    else return -d/3;              // Firefox;         TODO: do not /3 for OS X
  } else return w/120;             // IE/Safari/Chrome TODO: /3 for Chrome OS X
};

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. wheelDelta240), 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.

Hier ist mein verrückter Versuch, ein browserübergreifendes kohärentes und normalisiertes Delta (-1 <= Delta <= 1) zu erzeugen:

var o = e.originalEvent,
    d = o.detail, w = o.wheelDelta,
    n = 225, n1 = n-1;

// Normalize delta
d = d ? w && (f = w/d) ? d/f : -d/1.35 : w/120;
// Quadratic scale if |d| > 1
d = d < 1 ? d < -1 ? (-Math.pow(d, 2) - n1) / n : d : (Math.pow(d, 2) + n1) / n;
// Delta *should* not be greater than 2...
e.delta = Math.min(Math.max(d / 2, -1), 1);

Dies ist völlig empirisch, funktioniert aber unter Safari 6, FF 16, Opera 12 (OS X) und IE 7 unter XP recht gut

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.

// Reasonable defaults
var PIXEL_STEP  = 10;
var LINE_HEIGHT = 40;
var PAGE_HEIGHT = 800;

function normalizeWheel(/*object*/ event) /*object*/ {
  var sX = 0, sY = 0,       // spinX, spinY
      pX = 0, pY = 0;       // pixelX, pixelY

  // Legacy
  if ('detail'      in event) { sY = event.detail; }
  if ('wheelDelta'  in event) { sY = -event.wheelDelta / 120; }
  if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
  if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }

  // side scrolling on FF with DOMMouseScroll
  if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
    sX = sY;
    sY = 0;
  }

  pX = sX * PIXEL_STEP;
  pY = sY * PIXEL_STEP;

  if ('deltaY' in event) { pY = event.deltaY; }
  if ('deltaX' in event) { pX = event.deltaX; }

  if ((pX || pY) && event.deltaMode) {
    if (event.deltaMode == 1) {          // delta in LINE units
      pX *= LINE_HEIGHT;
      pY *= LINE_HEIGHT;
    } else {                             // delta in PAGE units
      pX *= PAGE_HEIGHT;
      pY *= PAGE_HEIGHT;
    }
  }

  // Fall-back if spin cannot be determined
  if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
  if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }

  return { spinX  : sX,
           spinY  : sY,
           pixelX : pX,
           pixelY : pY };
}

Den Quellcode finden Sie hier: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js

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/

function normalizeWheelSpeed(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    return normalized;
}

Tabelle für mousewheel, wheelund DOMMouseScrollEreignisse:

| mousewheel        | Chrome (win) | Chrome (mac) | Firefox (win) | Firefox (mac) | Safari 7 (mac) | Opera 22 (mac) | Opera 22 (win) | IE11      | IE 9 & 10   | IE 7 & 8  |
|-------------------|--------------|--------------|---------------|---------------|----------------|----------------|----------------|-----------|-------------|-----------|
| event.detail      | 0            | 0            | -             | -             | 0              | 0              | 0              | 0         | 0           | undefined |
| event.wheelDelta  | 120          | 120          | -             | -             | 12             | 120            | 120            | 120       | 120         | 120       |
| event.wheelDeltaY | 120          | 120          | -             | -             | 12             | 120            | 120            | undefined | undefined   | undefined |
| event.wheelDeltaX | 0            | 0            | -             | -             | 0              | 0              | 0              | undefined | undefined   | undefined |
| event.delta       | undefined    | undefined    | -             | -             | undefined      | undefined      | undefined      | undefined | undefined   | undefined |
| event.deltaY      | -100         | -4           | -             | -             | undefined      | -4             | -100           | undefined | undefined   | undefined |
| event.deltaX      | 0            | 0            | -             | -             | undefined      | 0              | 0              | undefined | undefined   | undefined |
|                   |              |              |               |               |                |                |                |           |             |           |
| wheel             | Chrome (win) | Chrome (mac) | Firefox (win) | Firefox (mac) | Safari 7 (mac) | Opera 22 (mac) | Opera 22 (win) | IE11      | IE 10 & 9   | IE 7 & 8  |
| event.detail      | 0            | 0            | 0             | 0             | -              | 0              | 0              | 0         | 0           | -         |
| event.wheelDelta  | 120          | 120          | undefined     | undefined     | -              | 120            | 120            | undefined | undefined   | -         |
| event.wheelDeltaY | 120          | 120          | undefined     | undefined     | -              | 120            | 120            | undefined | undefined   | -         |
| event.wheelDeltaX | 0            | 0            | undefined     | undefined     | -              | 0              | 0              | undefined | undefined   | -         |
| event.delta       | undefined    | undefined    | undefined     | undefined     | -              | undefined      | undefined      | undefined | undefined   | -         |
| event.deltaY      | -100         | -4           | -3            | -0,1          | -              | -4             | -100           | -99,56    | -68,4 | -53 | -         |
| event.deltaX      | 0            | 0            | 0             | 0             | -              | 0              | 0              | 0         | 0           | -         |
|                   |              |              |               |               |                |                |                |           |             |           |
|                   |              |              |               |               |                |                |                |           |             |           |
| DOMMouseScroll    |              |              | Firefox (win) | Firefox (mac) |                |                |                |           |             |           |
| event.detail      |              |              | -3            | -1            |                |                |                |           |             |           |
| event.wheelDelta  |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.wheelDeltaY |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.wheelDeltaX |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.delta       |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.deltaY      |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.deltaX      |              |              | undefined     | undefined     |                |                |                |           |             |           |

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

var normalizeWheelDelta = function() {
  // Keep a distribution of observed values, and scale by the
  // 33rd percentile.
  var distribution = [], done = null, scale = 30;
  return function(n) {
    // Zeroes don't count.
    if (n == 0) return n;
    // After 500 samples, we stop sampling and keep current factor.
    if (done != null) return n * done;
    var abs = Math.abs(n);
    // Insert value (sorted in ascending order).
    outer: do { // Just used for break goto
      for (var i = 0; i < distribution.length; ++i) {
        if (abs <= distribution[i]) {
          distribution.splice(i, 0, abs);
          break outer;
        }
      }
      distribution.push(abs);
    } while (false);
    // Factor is scale divided by 33rd percentile.
    var factor = scale / distribution[Math.floor(distribution.length / 3)];
    if (distribution.length == 500) done = factor;
    return n * factor;
  };
}();

// Usual boilerplate scroll-wheel incompatibility plaster.

var div = document.getElementById("thing");
div.addEventListener("DOMMouseScroll", grabScroll, false);
div.addEventListener("mousewheel", grabScroll, false);

function grabScroll(e) {
  var dx = -(e.wheelDeltaX || 0), dy = -(e.wheelDeltaY || e.wheelDelta || 0);
  if (e.detail != null) {
    if (e.axis == e.HORIZONTAL_AXIS) dx = e.detail;
    else if (e.axis == e.VERTICAL_AXIS) dy = e.detail;
  }
  if (dx) {
    var ndx = Math.round(normalizeWheelDelta(dx));
    if (!ndx) ndx = dx > 0 ? 1 : -1;
    div.scrollLeft += ndx;
  }
  if (dy) {
    var ndy = Math.round(normalizeWheelDelta(dy));
    if (!ndy) ndy = dy > 0 ? 1 : -1;
    div.scrollTop += ndy;
  }
  if (dx || dy) { e.preventDefault(); e.stopPropagation(); }
}

Einfache und funktionierende Lösung:

private normalizeDelta(wheelEvent: WheelEvent):number {
    var delta = 0;
    var wheelDelta = wheelEvent.wheelDelta;
    var deltaY = wheelEvent.deltaY;
    // CHROME WIN/MAC | SAFARI 7 MAC | OPERA WIN/MAC | EDGE
    if (wheelDelta) {
        delta = -wheelDelta / 120; 
    }
    // FIREFOX WIN / MAC | IE
    if(deltaY) {
        deltaY > 0 ? delta = 1 : delta = -1;
    }
    return delta;
}

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 onwheelist 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-spezifische MozMousePixelScrollEreignis 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 verwenden onwheel . 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).

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:

1. Das bereits erwähnte "benutze nur das Zeichen", das jede Art von Beschleunigung tötet
2. Schnüffeln Sie am Browser bis zur Nebenversion und Plattform und passen Sie ihn richtig an
3. Qooxdoo hat kürzlich einen selbstanpassenden Algorithmus implementiert, der im Wesentlichen versucht, das Delta basierend auf dem bisher empfangenen Minimal- und Maximalwert zu skalieren.

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.

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.

var onMouseWheel = function(e) {
    e = e.originalEvent;
    var delta = e.wheelDelta>0||e.detail<0?1:-1;
    alert(delta);
}
$("body").bind("mousewheel DOMMouseScroll", onMouseWheel);