Esta noticia fue analizado por nuestros especialistas para garantizar la veracidad de nuestra esta reseña.
Solución:
Editar septiembre de 2014
Dado que:
- Diferentes versiones del mismo navegador en OS X han arrojado valores diferentes en el pasado, y pueden hacerlo en el futuro, y eso
- Usar el trackpad en OS X produce resultados muy similares efectos a usar la rueda del mouse, pero da un evento muy diferente valoresy, sin embargo, JS no puede detectar la diferencia del dispositivo
…Solo puedo recomendar el uso de este simple código de conteo basado en signos:
var handleScroll = function(evt) 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
El intento original de ser correcto sigue.
Aquí está mi primer intento de un script para normalizar los valores. Tiene dos fallas en OS X: Firefox en OS X producirá valores 1/3 de lo que deberían ser, y Chrome en OS X producirá valores 1/40 de lo que deberían ser.
// 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
;
Puede probar este código en su propio navegador aquí: http://phrogz.net/JS/wheeldelta.html
Se agradecen las sugerencias para detectar y mejorar el comportamiento de Firefox y Chrome en OS X.
Editar: Una sugerencia de @Tom es simplemente contar cada llamada de evento como un solo movimiento, usando el signo de la distancia para ajustarlo. Esto no dará grandes resultados con desplazamiento suave/acelerado en OS X, ni manejará perfectamente los casos en los que la rueda del mouse se mueva muy rápido (por ejemplo, wheelDelta es 240), pero esto ocurre con poca frecuencia. Este código es ahora la técnica recomendada que se muestra en la parte superior de esta respuesta, por las razones descritas allí.
Nuestros amigos de Facebook crearon una gran solución para este problema.
¡He probado en una tabla de datos que estoy construyendo usando React y se desplaza como mantequilla!
Esta solución funciona en una variedad de navegadores, en Windows/Mac y ambos con trackpad/ratón.
// Reasonable defaults
var PIXEL_STEP = 10;
var LINE_HEIGHT = 40;
var PAGE_HEIGHT = 800;
function normalizeWheel(/*object*/ event) /*object*/
El código fuente se puede encontrar aquí: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
Aquí está mi loco intento de producir un delta normalizado y coherente entre navegadores (-1 <= delta <= 1):
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);
Esto es totalmente empírico pero funciona bastante bien en Safari 6, FF 16, Opera 12 (OS X) e IE 7 en XP
Si piensas que te ha resultado útil nuestro post, te agradeceríamos que lo compartas con el resto seniors así contrubuyes a dar difusión a nuestra información.