Руководство Javascript WheelEvent
View more Tutorials:
WheelEvent это интерфейс представляющий происходящие события, когда пользователь двигает колесо мыши (mouse wheel) или подобного устройства.

Браузеры поддерживающие WheelEvent:

WheelEvent это подинтерфейс MouseEvent, который унаследует все свойства (property) и методы родительского интерфейса.

- TODO Link!
- TODO Link!
Событие | Описание |
---|---|
wheel | Событие происходит когда колесо мыши (mouse wheel) катится вверх или вниз над элементом. |
Свойства (property) у WheelEvent:
Свойства | Описание |
---|---|
deltaX | Возвращает число горизонтальной прокрутки колеса мыши (mouse wheel) (Ось X) |
deltaY | Возвращает число вертикальной прокрутки колеса мыши (mouse wheel) (Ось Y) |
deltaZ | Возвращает количество прокрутки колеса мыши по оси Z. |
deltaMode | Возвращает чило, представляющее единицу измерения для значений delta (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE) |
Константы:
Константа | Значение | Описание |
DOM_DELTA_PIXEL | 0 | Единица измерения delta это pixels. |
DOM_DELTA_LINE | 1 | Единица измерения delta это lines. |
DOM_DELTA_PAGE | 2 | Единица измерения delta это pages. |
Пример с WheelEvent:

wheelevents-example.html
<!DOCTYPE html> <html> <head> <title>WheelEvent Example</title> <script src="wheelevents-example.js"></script> </head> <body> <h3>WheelEvent example</h3> <div style="font-size:12px; padding:5px; border:1px solid #ccc;" onwheel="wheelHandler(event)"> Hello Everyone! <div> </body> </html>
wheelevents-example.js
function wheelHandler(evt) { var fontSize = evt.target.style.fontSize;// 12px, 13px,... var value = Number(fontSize.substr(0, fontSize.length-2)); // 12, 13,.. // Scrolling up if (evt.deltaY < 0) { if(value < 50) { value++; } } // Scrolling down if(evt.deltaY > 0) { if(value > 5) { value--; } } evt.target.style.fontSize = value+"px"; }