html подія onwheel
Подія onwheel викликається, коли користувач прокручує коліщатко миші над елементом з атрибутом onwheel. Вона генерується над будь-яким елементом при пересуванні колеса миші. При цьому не важливо, прокручуваний він чи ні. Зокрема, overflow:hidden ніяк не перешкоджає обробці колеса миші.
Крім того, подія onscroll відбувається після прокрутки, а onwheel- до прокрутки, тому в ньому можна скасувати саму прокрутку (дія браузера).
Подія onwheel , також спрацьовує, коли користувач прокручує або масштабує за допомогою сенсорної панелі (наприклад, "миші' ноутбука).
Найважливіші властивості сучасного події і його нестандартних аналогів:
wheel
Властивість deltaY- кількість прокручених пікселів по вертикалі. Існують також властивості deltaX і deltaZ для інших напрямків прокрутки.
MozMousePixelScroll
Спрацьовує, починаючи з Firefox 3.5, тільки в Firefox. Дає можливість скасувати прокрутку і отримати розмір в пікселях через властивість detail, вісь прокрутки у властивості axis.
mousewheel
Спрацьовує в браузерах, які ще не реалізували wheel.
Щоб кросбраузерну відловити прокрутку і, при необхідності, скасувати її, можна використовувати всі ці події.
Картинка приклада
Синтаксис
<element onwheel="script">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 31.0+ | 17.0+ | Ні | 18.0+ | 12+ | 9+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 68+ | 76+ | 17+ | - |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML події onwheel
HTML
<div id="delta"></div>
<div class="block"onwheel="onWheel(event)">покрути коліщатко на мені </div>CSS
.block{
height:300px;
width:300px;
background:red;
padding: 5%;
vertical-align:middle;
}JS
function onWheel(e) {
var delta = e.deltaY || e.detail || e.wheelDelta || e.deltaX || e.deltaZ;
var info = document.getElementById('delta');
info.innerHTML = +info.innerHTML + delta;
e.returnValue = false;
}
//# sourceURL=pen.jsHTML
<p>покрутіть над картинкою</p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" onwheel="f(this)">JS
var i = 300;
function f(element) {
if (i == 500) {
i = 300;element.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E";
} else
{
i = 500;element.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E";
}
}
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
Подія onwheel з’явилася тільки в HTML5
Коментарі
Коментарів ще немає — будьте першим!