Para uma pergunta diferente , compus esta resposta , incluindo este código de exemplo .
Nesse código, uso a roda do mouse para aumentar / diminuir o zoom de uma tela HTML5. Encontrei algum código que normaliza as diferenças de velocidade entre o Chrome e o Firefox. No entanto, o manuseio de zoom no Safari é muito, muito mais rápido do que em qualquer um deles.
Aqui está o código que tenho atualmente:
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
Qual código posso usar para obter o mesmo valor 'delta' para a mesma quantidade de roda do mouse rolando no Chrome v10 / 11, Firefox v4, Safari v5, Opera v11 e IE9?
Esta pergunta está relacionada, mas não tem uma boa resposta.
Edit : Investigações adicionais mostram que um evento de rolagem 'up' é:
| evt.wheelDelta | evt.detail ------------------ + ---------------- + ------------ Safari v5 / Win7 | 120 0 0 Safari v5 / OS X | 120 0 0 Safari v7 / OS X | 12 0 0 Chrome v11 / Win7 | 120 0 0 Chrome v37 / Win7 | 120 0 0 Chrome v11 / OS X | 3 (!) 0 (possivelmente errado) Chrome v37 / OS X | 120 0 0 IE9 / Win7 120 Indefinido Opera v11 / OS X | 40 -1 Opera v24 / OS X | 120 0 0 Opera v11 / Win7 | 120 -3 Firefox v4 / Win7 | indefinido | -3 Firefox v4 / OS X | indefinido | -1 Firefox v30 / OS X | indefinido | -1
Além disso, o uso do trackpad do MacBook no OS X fornece resultados diferentes, mesmo quando se move devagar:
- No Safari e Chrome,
wheelDelta
é um valor de 3 em vez de 120 para a roda do mouse. - No Firefox ,
detail
geralmente é2
, às vezes1
, mas ao rolar muito lentamente, NÃO HANDLER DE EVENTOS FOI DE TODOS .
Então a questão é:
Qual é a melhor maneira de diferenciar esse comportamento (idealmente sem nenhum agente de usuário ou sistema operacional farejando)?
e.wheelDelta/120
?