How to know the direction of the mouse wheel scroll

Question

How to know the direction of the mouse wheel scroll

Navigation

#1 by (9 votes)

13

How to know the direction and amount of the scroll when scrolling with the mouse wheel?

Browsers have different ways of passing information on the event object. Some use .wheelDelta , others .detail , and others (new generation) use DOM3 wheel passing relevant information in deltaY or deltaX .

What is the best way to consistently know the direction and eventually the amount of scroll in different browsers?

To complete the question I leave a search I made about this, and making the mouse wheel rotate forward:

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

javascript

asked by anonymous 12.07.2014 / 00:28

1 answer

What are the ServiceProvider and ServiceContainer design patterns used in Laravel and Symfony? What is the difference between varchar and nvarchar?

score 9 · Accepted Answer

I found 2 approaches from the same idea.

First approach , make a function that returns the original and relevant value to the mouse wheel in different browsers, setting negative values for the direction to be consistent.

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

Example: link

In this variant it is still possible to reduce the movement to only +1 or -1 to be used as direction indicator: link

The other approach , more complex is to try to normalize the value to have the same behavior in different browsers. I used the question table to realize that browsers use multiples of a base number to show the speed / amount the wheel moves. Using this information, I checked the results to find out via "feature detect" (or more accurately "multiple detect") which browser and how this value should be handled.

So I got to this code:

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

Example: link

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

Note : Because different browsers use different events, you must "hear" the right event. So to tie an event observer use like this, to detect which is the right browser and the event that it should "listen":

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

I tested this answer in IE7 ~ 11, Firefox (newer) Win and Mac, Safari 7, Chrome (newer) Win and Mac, Opera (newer) Win and Mac. I also noticed that the Mac platform is more generous in the values it returns. So in Mac the values of a very fast running are bigger than those of Windows, but equal among browsers of the same platform. The minimum value is the same.