Table Of Content
Javascript WheelEvent Tutorial with Examples
View more Tutorials:
Follow us on our fanpages to receive notifications every time there are new articles.
Facebook
Twitter
WheelEvent is an interface representing for the events occurring when an user moves mouse wheel or similar equipment.
Browsers which support WheelEvent:
WheelEvent means sub-interface of MouseEvent. It will inherit all properties and methods of parent interface.
- TODO Link?
| Event | Description |
|---|---|
| wheel | The event occurs when the mouse wheel rolls up or down over an element |
The properties of WheelEvent:
| Property | Description |
|---|---|
| deltaX | Returns the horizontal scroll amount of a mouse wheel (x-axis) |
| deltaY | Returns the vertical scroll amount of a mouse wheel (y-axis) |
| deltaZ | Returns the scroll amount of a mouse wheel for the z-axis |
| deltaMode | Returns a number that represents the unit of measurements for delta values (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE) |
Constants:
| Constant | Value | Description |
| DOM_DELTA_PIXEL | 0 | Measuring unit of delta is pixels. |
| DOM_DELTA_LINE | 1 | Measuring unit of delta is lines. |
| DOM_DELTA_PAGE | 2 | Measuring unit of delta is pages. |
Example with 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";
}
