Table Of Content

Javascript WheelEvent Tutorial

View more Tutorials:

1- WheelEvent

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

}

 

View more Tutorials: