Para una cuestión diferente compuse esta respuesta, incluyendo este código de ejemplo.

En que código puedo usar la rueda del ratón para hacer zoom in/out de un elemento Canvas de HTML5. He encontrado algo de código que se normaliza diferencias de velocidad entre Chrome y Firefox. Sin embargo, el zoom de manejo en Safari es mucho, mucho más rápido que en cualquiera de esos.

Este es el código que tengo actualmente:

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

Qué código se puede utilizar para obtener el mismo ‘delta’ valor para la misma cantidad de ratón de la rueda rodando a través de Chrome v10/11, Firefox v4, Safari v5, Ópera v11 y IE9?

Esta pregunta está relacionado, pero no tiene buena respuesta.

Editar: Más investigación muestra que uno de los eventos de desplazamiento ‘up’ es:

 | evt.wheelDelta | evt.detalle 
------------------+----------------+------------ 
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 (posiblemente errónea) 
Chrome v37/OS X | 120 | 0 
IE9/Win7 | 120 | undefined 
La ópera v11/OS X | 40 | -1 
La ópera v24/OS X | 120 | 0 
La ópera v11/Win7 | 120 | -3 
Firefox v4/Win7 | indefinido | -3 
Firefox v4/OS X | indefinido | -1 
Firefox v30/OS X | indefinido | -1 

Más, usando el trackpad del MacBook en OS X da resultados diferentes, incluso cuando se mueve lentamente:

  • En Safari y Chrome, el wheelDelta es un valor de 3 en lugar de 120 para la rueda del ratón.
  • En Firefox el detail es generalmente 2, a veces 1, pero cuando se desplaza muy lentamente NINGÚN CONTROLADOR de EVENTOS de INCENDIOS EN TODOS los.

Así que la pregunta es:

¿Cuál es la mejor forma de diferenciar este comportamiento (idealmente sin ningún tipo de agente de usuario o de sistema operativo, sniffing)?

  • Lo siento, he eliminado mi pregunta. Estoy escribiendo una respuesta ahora mismo. Antes de llegar mucho más lejos, estás hablando de que el desplazamiento de un Safari en Mac OS X? Cuando se desplaza un poco, se desplaza un poco, pero si mantener una velocidad constante, que progresivamente se vuelve más rápido?
  • Yo estoy probando en OS X ahora, y sí, Safari es el valor atípico que es el zoom alrededor de 20 veces más rápido que Chrome. Por desgracia no tengo un físico ratón conectado, así que mi prueba está limitada a dos-dedo-golpes de ≈equivalente a distancias y velocidades.
  • He actualizado a la pregunta con detalles sobre el comportamiento de los 5 mejores navegadores a través de OS X y Win7. Es un campo de minas, con Chrome para OS X que aparece a la problemática de las demás.
  • No debería ser e.wheelDelta/120?
  • Sí, el código que he copiado y estaba usando era claramente errónea. Se puede ver mejor el código en el mi respuesta de abajo.
  • Me puede confirmar los resultados para Win7 (Demo es aquí) – -3 en Firefox y 120 en todos los demás navegadores. El problema parece ser con OS X. Usted debe tratar de obtener una confirmación de un OS X usuario (especialmente para Chrome).
  • Sería interesante tener esta u otra cuestión a abordar DOM3 deltaX, deltaY y deltaZ propiedades
  • No debería ser un estándar web para la frecuencia y el momento de desplazamiento/eventos de rueda de fuego para las páginas web.
  • developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode es la clave, consulte @George respuesta

InformationsquelleAutor Phrogz | 2011-04-03

10 Comentarios

  1. 53

    Edición De Septiembre De 2014

    Dado que:

    • Diferentes versiones de un mismo navegador en OS X se han obtenido diferentes valores en el pasado, y podría hacerlo en el futuro, y que
    • Con el trackpad en OS X rendimientos muy similares efectos para el uso de la rueda del ratón, sin embargo, da muy diferentes de eventos valores, y sin embargo, el dispositivo de diferencia no puede ser detectado por JS

    …Sólo puedo recomendar el uso de este simple, de inicio de sesión en base de conteo de código:

    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

    Original intento de ser correcta la siguiente manera.

    Aquí está mi primer intento en una secuencia de comandos para normalizar los valores. Tiene dos defectos en OS X: Firefox OS X se producen valores de 1/3 de lo que debe ser, y Chrome para OS X, se producen valores 1/40 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
    };

    Usted puede probar este código en tu navegador aquí: http://phrogz.net/JS/wheeldelta.html

    Sugerencias para la detección y mejora el comportamiento en Firefox y Chrome en OS X son bienvenidos.

    Editar: Una sugerencia de @Tom es simplemente contar cada evento de la llamada como un solo movimiento, utilizando el signo de la distancia para ajustar. Esto no va a dar grandes resultados bajo la suave/acelerado desplazamiento en OS X, ni manejar a la perfección los casos, cuando la rueda del ratón se mueve muy rápido (por ejemplo, wheelDelta es de 240), pero esto sucede con poca frecuencia. Este código es ahora la técnica recomendada muestra en la parte superior de esta respuesta, por las razones descritas allí.

    • Para sistemas Windows, este debe hacer es: jsfiddle.net/simevidas/FLLJ3
    • El lector de la versión adaptada está aquí: jsfiddle.net/simevidas/FLLJ3/1
    • Gracias, eso es básicamente lo que tengo, excepto que yo también cuenta para el 1/3 de la diferencia en la Ópera de OS X.
    • ¿tienes una versión actualizada en Septiembre del’ 2014 con todas las versiones de OS X /3, se agrega ? Esta sería una gran adición para la comunidad!
    • esto sería genial. No tengo un Mac aquí para probar… (yo estaría encantado de darle una recompensa para que, incluso si yo no tengo mucha reputación mí ;))
    • He actualizado los resultados de la prueba en la pregunta original. Dado que (a) Safari en OS X ahora rendimientos 12 en lugar de 120, mientras que todos los otros navegadores en OS X han conseguido better, y (b) no hay manera de diferenciar los eventos procedentes de la almohadilla táctil en comparación con un ratón, sin embargo, dan drásticamente diferentes detalles del evento, estoy editando mi respuesta anterior para recomendar el simple wheelDirection de la prueba.
    • gracias @Phrogz por haber investigado sobre lo que ocurre en OS X. El problema es que si sólo usamos el «inicio de sesión basado en el conteo» método, va a dar resultados muy diferentes : probar mi herramienta de bigpicture.bi/demo (que utiliza básica como la que sugieren) : funciona en FF, Chrome, IE (Win7). Pero parece que el zoom es demasiado rápido con OS X… ¿qué te parece ?
    • Sí, con el track pad muchos muchos eventos en OS X. Sólo otro hack que puedo pensar es envolver el contenido en una infinitamente desplazamiento de contenedores, hacen que el contenido de la posición fija y, a continuación detectar la scrollOffset cambios del contenedor.
    • Su edición fue incorrecta, y cambió drásticamente la respuesta. Por favor, publicar un comentario para tal drástico editar en el futuro. Nota, a partir de la «investigación», publicado en la pregunta, el wheelDelta y detail son signos opuestos. El evt.detail prueba es necesario para FireFox.
    • Oh, yo he mezclado algo con mis propias secuencias de comandos. Lo siento por la confusión.
    • En windows Firefox 35.0.1, wheelDelta es indefinido y el detalle siempre es 0, lo que hace que el código suministrado a fallar.
    • Se enfrentan el mismo problema, he añadido «deltaY» para superar esta en la dirección como la que (((evt.deltaY <0 || evt.wheelDelta>0) || evt.deltaY < 0) ? 1 : -1) no está seguro de qué QA encuentra con que, a pesar de que.
    • La mejor y más completa solución es utilizar este código de Facebook stackoverflow.com/a/30134826/4387229

  2. 28

    Aquí está mi loco intento de producir una cruz navegador coherente y normalizada delta ( -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írica, pero funciona bastante bien en Safari 6, FF 16, Opera 12 (OS X) y el IE 7 en XP

    • Si yo pudiera upvote otro 10 veces que podía. Muchas gracias!
    • Por favor, puedes tener la completa código funcional en una demostración (por ejemplo, jsFiddle) ?
    • Hay una razón para caché el event-objeto en o?
    • No hay ninguno. El o variable está ahí para mostrar queremos que el evento original y no una envuelto evento como jQuery o de otras bibliotecas puede pasar a los controladores de eventos.
    • podría por favor explicar n y n1? ¿Cuáles son estas variables?
    • Creo que también debería declarar f en el var.

  3. 21

    Nuestros amigos en Facebook juntar una gran solución a este problema.

    He probado en una tabla de datos que estoy construyendo el uso de Reaccionar y se desplaza como la 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*/ {
    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 };
    }

    El código fuente se puede encontrar aquí: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js

    • Un vínculo más directo que no ha sido incluido en el código original de normalizeWHeel.js github.com/facebook/fixed-data-table/blob/master/src/…
    • Gracias @RobinLuiten, la actualización de la publicación original.
    • Este material es brillante. Acaba de hacer uso de ella y funciona como un encanto! Buen trabajo en Facebook 🙂
    • Podrías dar algún ejemplo de cómo se usa? Lo he probado y funciona en FF, pero no en Chrome o IE (11)..? Gracias
    • Para cualquier persona que utiliza npm hay un listo para usar paquete de este código extraído de Facebook Fijos de la Tabla de Datos. Ver aquí para más detalles npmjs.com/package/normalize-wheel
    • Podría iluminar ¿por qué es trabajar? Entiendo que el cálculo de todos y todas. Pero no muy seguro de cómo hacer esto en un ciclo de manejo de eventos. Esta función (como yo digo), simplemente devuelve un objeto. ¿Cómo los navegadores saber para utilizar este objeto para determinar su desplazamiento a distancia?
    • Esto funciona porque de developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode donde deltaMode de 1 se multiplica por 40 y delta modo de 2 se multiplica por 800. 40 y 800 creo que se derivan empíricamente

  4. 11

    He hecho una tabla con diferentes valores devueltos por diferentes eventos/navegadores, teniendo en cuenta la DOM3 wheel caso de que algunos navegadores ya soportan (tabla debajo).

    Basa en que hice esta función para normalizar la velocidad:

    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;
    }

    Tabla para mousewheel, wheel y DOMMouseScroll eventos:

    | 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     |                |                |                |           |             |           |
    • Resultados en diferentes velocidades de desplazamiento en la actual Safari y Firefox en macOS.
  5. 6

    Otro más o menos autónomo de solución de…

    Esto no toma el tiempo entre los eventos en cuenta sin embargo. Algunos navegadores parecen siempre el fuego de eventos con el mismo delta, y sólo el fuego más rápido cuando se desplaza rápidamente. Otros hacen variar los deltas. Uno puede imaginar una adaptación normalizador que toma en cuenta el tiempo, pero que iba a llegar un poco involucrados y difícil de usar.

    De trabajo disponible aquí: 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(); }
    }
    • Esta solución no funciona con Chrome en Mac con Trackpad.
    • Yo creo que lo hace ahora. Acabo de encontrar esta pregunta y el ejemplo que aquí funciona en mi macbook con chrome
  6. 3

    Para soporte de zoom en dispositivos táctiles, registro de la gesturestart, gesturechange y gestureend eventos y utilizar el evento.la escala de la propiedad. Usted puede ver ejemplo de código para esto.

    Para Firefox 17 de la onwheel evento está previsto para ser soportado por móviles y de escritorio versiones (como por MDN docs en onwheel). También para Firefox tal vez el Gecko específicos MozMousePixelScroll evento es útil (aunque se presume que ahora está en desuso desde la DOMMouseWheel caso está ahora en desuso en Firefox).

    Para Windows, el controlador en sí parece generar el WM_MOUSEWHEEL, WM_MOUSEHWHEEL eventos (y tal vez el WM_GESTURE evento para el panel táctil panorámica?). Eso explicaría por qué Windows o el explorador no parece normalizar la rueda de los valores de evento en sí (y podría significar que usted no puede escribir código fiable a la normalización de los valores).

    Para onwheel (no onmousewheel) evento la compatibilidad de Internet Explorer para IE9 y IE10, también puede utilizar el Estándar de W3C onwheel evento. Sin embargo, una muesca puede ser un valor diferente de 120 (por ejemplo, una sola muesca se convierte en 111 (en lugar de -120) de mi mouse el uso de esta página de prueba). Escribí otro artículo con otros detalles de la rueda de eventos que podrían ser relevantes.

    Básicamente en mis propias pruebas para los eventos de rueda (estoy tratando de normalizar los valores de desplazamiento), he encontrado que obtener diferentes valores para el sistema operativo, navegador, proveedor, versión del navegador, el tipo de evento, y los dispositivos de Microsoft tiltwheel ratón del ordenador portátil, panel táctil gestos, el touchpad de la laptop con scrollzone, Apple magic mouse de Apple mighty mouse scrollball, Mac touchpad, etc, etc).

    Y tiene que ignorar una variedad de efectos secundarios de configuración de su navegador (por ejemplo, Firefox rueda del ratón.enable_pixel_scrolling, chrome –de desplazamiento de píxeles=150), la configuración del controlador (por ejemplo, Synaptics touchpad), y la configuración del sistema operativo (Windows la configuración del ratón, OSX preferencias de Ratón, X.org botón de configuración).

  7. 2

    Este es un problema que he estado luchando con algunas horas de hoy, y no es la primera vez 🙁

    He estado tratando de resumir los valores a través de un «flagelo» y ver cómo los diferentes navegadores informe de valores, y que varían mucho, con Safari informes orden de magnitud más grande de los números en casi todas las plataformas, Chrome informes bastante más (como 3 veces más) que el de firefox, firefox ser equilibrado en el largo plazo, pero muy diferentes entre plataformas en pequeños movimientos (en Ubuntu gnome, casi sólo +3 o -3, parece que resume eventos más pequeños y, a continuación, enviar un gran «+3»)

    Las actuales soluciones encontradas ahora son tres :

    1. El ya mencionado «usar sólo el signo» que mata a cualquier tipo de aceleración
    2. Oler el navegador hasta el menor de la versión y plataforma, y ajustar correctamente
    3. Qooxdoo puesto en marcha recientemente un auto adaptación del algoritmo, que básicamente intenta escalar el delta basado en el valor mínimo y máximo recibido hasta el momento.

    La idea en Qooxdoo es buena, y funciona, y es la única solución que he encontrado en la actualidad para ser totalmente compatible con todos los navegadores.

    Por desgracia tiende a renormalize también la aceleración. Si lo intentas (en sus demos), y desplácese hacia arriba y hacia abajo a velocidad máxima durante un tiempo, te darás cuenta de que el desplazamiento muy rápido o muy lento, básicamente, que producen casi la misma cantidad de movimiento. Por el contrario si recargamos la página y sólo deslizar el dedo muy lentamente, te darás cuenta de que es el que se desplaza muy rápido».

    Esto es frustrante para un usuario de Mac (como yo) se utiliza para dar vigoroso de desplazamiento pase el dedo en el panel táctil y esperar a llegar a la parte superior o inferior de la desplaza cosa.

    Incluso más, puesto que reduce la velocidad del mouse basado en el valor máximo obtenido, más su usuario intenta acelerar, el más lento, mientras que un «lento desplazamiento de la» experiencia de usuario bastante rápido acelera.

    Esto hace que este (de lo contrario brillante) solución un poco mejor implementación de la solución 1.

    He portado la solución para el plugin de jquery mousewheel : http://jsfiddle.net/SimoneGianni/pXzVv/

    Si juegas con él por un tiempo, Usted verá que usted comenzará a conseguir bastante homogéneo en los resultados, pero también te darás cuenta de que tienden a +1/-1 valores bastante rápido.

    Ahora estoy trabajando en la mejora de detectar picos mejor, así que ellos no mandan todo «fuera de escala». También sería bueno obtener un float valor entre 0 y 1, el valor de delta, por lo que no es coherente salida.

  8. 1

    Definitivamente hay ninguna forma sencilla de normalizar a través de todos los usuarios en todos los sistemas operativos en todos los navegadores.

    Se pone peor que las variaciones – en mi WindowsXP+Firefox3.6 configuración de mi rueda hace 6 por una muesca de desplazamiento – probablemente porque en algún lugar he olvidado he acelerado la rueda del ratón, ya sea en el sistema operativo o en algún lugar en about:config

    Sin embargo, estoy trabajando en un problema similar (con una aplicación similar por cierto, pero no de lona) y a mí se me ocurre únicamente utilizando el delta del signo de +1 /-1 y de medición a lo largo del tiempo la última vez que se ha disparado, tendrá una tasa de aceleración, es decir,. si alguien se desplaza una vez vs varias veces en un par de momentos (que apostaría a que es la forma en que google maps lo hace).

    El concepto parece funcionar bien en mis pruebas, acaba de hacer cualquier cosa menos de 100ms añadir a la aceleración.

  9. 0

    Simple y solución de trabajo:

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

Dejar respuesta

Please enter your comment!
Please enter your name here