Skip to main content
adicionou 337 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Encontrei 2 abordagens partindo da mesma ideia.

Primeira abordagem, fazer uma função que retorne o valor original e relevante à roda do mouse em browsers diferentes, ajustando valores negativos para a direção ser consistente.

var roda = (event.wheelDelta) ? event.wheelDelta : -(event.detail || event.deltaY);

Exemplo: http://jsfiddle.net/RzPPp/

Nesta variante é ainda possivel reduzir o movimento a somente +1 ou -1 para ser usado como indicador de direção: http://jsfiddle.net/RzPPp/1/

A outra abordagem, mais complexa é tentar normalizar o valor para ter o mesmo comportamento em browsers diferentes. Servi-me da tabela da pergunta para perceber que os browsers usam multiplos de um numero base para mostrar a velocidade/quantidade que a roda mexe. Usando essa informação, fiz um check as resultados para saber via "feature detect" (ou mais exatamente "multiplo detect") qual o browser e como esse valor deve ser tratado.

Assim cheguei a este código:

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

Exemplo: http://jsfiddle.net/RzPPp/2/

function normalizarRoda(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;
}

Nota: Como browsers diferentes usam eventos diferentes, é preciso "ouvir" o evento certo. Então para amarrar um oscultador de evento uso assim, para detectar qual o browser certo e o evento que ele deve "ouvir":

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
meuElemento.addEventListener(event, callback);

Testei esta resposta no IE7~11, Firefox (mais recente) Win e Mac, Safari 7, Chrome (mais recente) Win e Mac, Opera (mais recente) Win e Mac. Reparei também que a plataforma Mac é mais generosa nos valores que retorna. Assim em Mac os valores de uma rodagem bem rápida são maiores que os do Windows, mas iguais entre browsers da mesma plataforma. O valor minimo é o mesmo.

Encontrei 2 abordagens partindo da mesma ideia.

Primeira abordagem, fazer uma função que retorne o valor original e relevante à roda do mouse em browsers diferentes, ajustando valores negativos para a direção ser consistente.

var roda = (event.wheelDelta) ? event.wheelDelta : -(event.detail || event.deltaY);

Exemplo: http://jsfiddle.net/RzPPp/

Nesta variante é ainda possivel reduzir o movimento a somente +1 ou -1 para ser usado como indicador de direção: http://jsfiddle.net/RzPPp/1/

A outra abordagem, mais complexa é tentar normalizar o valor para ter o mesmo comportamento em browsers diferentes. Servi-me da tabela da pergunta para perceber que os browsers usam multiplos de um numero base para mostrar a velocidade/quantidade que a roda mexe. Usando essa informação, fiz um check as resultados para saber via "feature detect" (ou mais exatamente "multiplo detect") qual o browser e como esse valor deve ser tratado.

Assim cheguei a este código:

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

Exemplo: http://jsfiddle.net/RzPPp/2/

function normalizarRoda(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;
}

Nota: Como browsers diferentes usam eventos diferentes, é preciso "ouvir" o evento certo. Então para amarrar um oscultador de evento uso assim, para detectar qual o browser certo e o evento que ele deve "ouvir":

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
meuElemento.addEventListener(event, callback);

Encontrei 2 abordagens partindo da mesma ideia.

Primeira abordagem, fazer uma função que retorne o valor original e relevante à roda do mouse em browsers diferentes, ajustando valores negativos para a direção ser consistente.

var roda = (event.wheelDelta) ? event.wheelDelta : -(event.detail || event.deltaY);

Exemplo: http://jsfiddle.net/RzPPp/

Nesta variante é ainda possivel reduzir o movimento a somente +1 ou -1 para ser usado como indicador de direção: http://jsfiddle.net/RzPPp/1/

A outra abordagem, mais complexa é tentar normalizar o valor para ter o mesmo comportamento em browsers diferentes. Servi-me da tabela da pergunta para perceber que os browsers usam multiplos de um numero base para mostrar a velocidade/quantidade que a roda mexe. Usando essa informação, fiz um check as resultados para saber via "feature detect" (ou mais exatamente "multiplo detect") qual o browser e como esse valor deve ser tratado.

Assim cheguei a este código:

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

Exemplo: http://jsfiddle.net/RzPPp/2/

function normalizarRoda(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;
}

Nota: Como browsers diferentes usam eventos diferentes, é preciso "ouvir" o evento certo. Então para amarrar um oscultador de evento uso assim, para detectar qual o browser certo e o evento que ele deve "ouvir":

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
meuElemento.addEventListener(event, callback);

Testei esta resposta no IE7~11, Firefox (mais recente) Win e Mac, Safari 7, Chrome (mais recente) Win e Mac, Opera (mais recente) Win e Mac. Reparei também que a plataforma Mac é mais generosa nos valores que retorna. Assim em Mac os valores de uma rodagem bem rápida são maiores que os do Windows, mas iguais entre browsers da mesma plataforma. O valor minimo é o mesmo.

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Encontrei 2 abordagens partindo da mesma ideia.

Primeira abordagem, fazer uma função que retorne o valor original e relevante à roda do mouse em browsers diferentes, ajustando valores negativos para a direção ser consistente.

var roda = (event.wheelDelta) ? event.wheelDelta : -(event.detail || event.deltaY);

Exemplo: http://jsfiddle.net/RzPPp/

Nesta variante é ainda possivel reduzir o movimento a somente +1 ou -1 para ser usado como indicador de direção: http://jsfiddle.net/RzPPp/1/

A outra abordagem, mais complexa é tentar normalizar o valor para ter o mesmo comportamento em browsers diferentes. Servi-me da tabela da pergunta para perceber que os browsers usam multiplos de um numero base para mostrar a velocidade/quantidade que a roda mexe. Usando essa informação, fiz um check as resultados para saber via "feature detect" (ou mais exatamente "multiplo detect") qual o browser e como esse valor deve ser tratado.

Assim cheguei a este código:

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

Exemplo: http://jsfiddle.net/RzPPp/2/

function normalizarRoda(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;
}

Nota: Como browsers diferentes usam eventos diferentes, é preciso "ouvir" o evento certo. Então para amarrar um oscultador de evento uso assim, para detectar qual o browser certo e o evento que ele deve "ouvir":

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
meuElemento.addEventListener(event, callback);