Javascript WheelEvent Tutorial with Examples

WheelEvent

1. WheelEvent

No ADS

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.

Javascript MouseEvent
Javascript UiEvent
Hướng dẫn và ví dụ Javascript Event

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

}

No ADS

Javascript WheelEvent Tutorial with Examples

1. WheelEvent

ECMAScript, Javascript Tutorials

ECMAScript, Javascript Tutorials

Newest Articles