Cодержание
Руководство Javascript WheelEvent
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
WheelEvent это интерфейс представляющий происходящие события, когда пользователь двигает колесо мыши (mouse wheel) или подобного устройства.
Браузеры поддерживающие WheelEvent:
WheelEvent это подинтерфейс MouseEvent, который унаследует все свойства (property) и методы родительского интерфейса.
| Событие | Описание |
|---|---|
| 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";
}
