o7planning

Javascript WheelEvent Tutorial with Examples

  1. WheelEvent

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

}

ECMAScript, Javascript Tutorials

Show More