13

Como saber a direção e quantidade do scroll quando se faz scroll com a roda do mouse?

Os browsers têm maneiras diferentes de passar informação no objeto event. Uns usam o .wheelDelta, outros o .detail, e outros (de nova geração) usam o evento DOM3 wheel passando informação relevante no deltaY ou deltaX.

Qual a melhor maneira de saber de maneira consistente a direção e eventualmente a quantidade do scroll em browsers diferentes?

Para completar a pergunta deixo uma pesquisa que fiz sobre isto, e fazendo a roda do mouse rodar para a frente:

| 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     |                |                |                |           |             |           |
1
  • 1
    A razão desta pergunta e resposta é porque estive a corrigir um bug sobre isto numa biblioteca de JavaScript. Publico aqui a resposta a que cheguei. Se houver falhas ou maneiras melhores de o fazer seria interessante ver aqui. Existe uma pergunta relacionada no SOen, mas que não me deu a resposta completa...
    – Sergio
    Commented 11/07/2014 às 22:31

1 Resposta 1

9

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .