Javascript WheelEvent Tutorial with Examples

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

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?
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)
DOM_DELTA_PIXEL0Measuring unit of delta is pixels.
DOM_DELTA_LINE1Measuring unit of delta is lines.
DOM_DELTA_PAGE2Measuring unit of delta is​​​​​​​ pages.
Example with WheelEvent:

<!DOCTYPE html>
      <title>WheelEvent Example</title>

      <script src="wheelevents-example.js"></script>


      <h3>WheelEvent example</h3>

      <div style="font-size:12px; padding:5px; border:1px solid #ccc;"
            Hello Everyone!


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)  {

   // Scrolling down
   if(evt.deltaY > 0)  {
      if(value > 5)  {
   evt.target.style.fontSize = value+"px";



View more Tutorials: